How to disable text selection highlighting using CSS?-CSS Tutorial-php.cn

How to disable text selection highlighting using CSS?

WBOY

Release： 2023-09-19 11:21:09

forward

995 people have browsed it

如何使用 CSS 禁用文本选择突出显示？

In CSS, we can use the select attribute to disable text selection highlighting. But to disable the text we have to apply some properties in CSS so that the text cannot be selected or highlighted. Let us take an example to understand the difference between highlighted and non-highlighted text.

Tutorialspoint - Text highlighting.
Tutorialspoint - Text is not highlighted.

Attributes used

The following properties are used in the example -

user-select - This attribute defines whether the user selects the text element. Chrome and Opera browsers support this property.
moz-user-select - This attribute has the same effect as the user-select attribute and is supported by the Mozilla Firefox browser.
webkit-text-select - IOS safari browser supports this attribute and is the same as the user select attribute.
webkit-user-select - This property works the same as the user-select property. Safari browser supports this property.

Example 1

In this example, we first set the main title of the text, and use h1 elements and p elements to set text paragraphs. To disable text selection highlighting on a paragraph, it uses internal CSS to enable the p element's class, which is ".no-highlight". This class sets the value in the browser property named user-select to none (text selection is disabled in Chrome and Opera browsers).

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
   <style>
      .not-active{
         user-select: none; // chrome and Opera
      }
   </style>
</head>
<body>
   <center>
      <h1>The Story of Helen Keller</h1>
   </center>
   <p class="not-active">Helen Keller (born June 27, 1880, in Tuscumbia, Alabama, U.S.—died June 1, 1968, in Westport, Connecticut) was a blind and deaf American author and schoolteacher. Keller lost her eyes and hearing at the age of 19 months due to illness, and her speech development followed suit. Anne Sullivan (1866-1936), who taught her the names of things by pressing the manual alphabet into her palm, started instructing her five years later. Keller eventually learned to read and write in Braille. She was the author of several works, including The Story of My Life. (1902). William Gibson's play The Miracle Worker depicted her upbringing. (1959; film, 1962).</p>
   <p>
      <b>@tutorialspoint<b>
   </p>
</body>
</html>

Copy after login

Example 2

In this example, we will use the p element to create two paragraphs to show the difference between enabling and disabling text selection. The first paragraph is a simple representation of the text, which means the text is enabled, but in the second paragraph it sets a class called ".no-highlight". Then use internal CSS to get this reference and disable text selection by styling a different browser property.

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
   <style>
      .no-highlight{
         user-select: none; // chrome and Opera
         -moz-user-select: none; // Firefox
         -webkit-text-select: none; // IOS Safari
         -webkit-user-select: none; // Safari
      }
   </style>
</head>
<body>
   <h1>Disable the text selection highlighting using CSS</h1>
   <p>The text can be highlighted</p>
   <p class="no-highlight">The text cannot be highlighted</p>
</body>
</html>

Copy after login

in conclusion

We understand its concept by enabling and disabling text highlighting. In the above output, you can see that when the cursor moves over the text, the first text gets highlighted, while in the second paragraph, the text does not get highlighted because of the disable browser property used in the internal CSS.

The above is the detailed content of How to disable text selection highlighting using CSS?. For more information, please follow other related articles on the PHP Chinese website!