Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable text selection highlighting using CSS?
In CSS we can use select property to disable the text selection highlighting. But to disable that text, we have to apply some properties in CSS so that the text can’t be selected or highlighted. Let’s take an example to understand the difference between highlighting vs non-highlighting text.
Tutorialspoint − The text is highlighted.
Tutorialspoint − The text is not highlighted.
Properties Used
The following properties used in the example −
user-select − This attribute defines whether the text element is selected by the user or not. This attribute is supported by the browser namely Chrome and Opera.
moz-user-select − This attribute works the same w.r.t the attribute user-select and this attribute is supported by the browser Mozilla Firefox.
webkit-text-select − The IOS safari browser support this attribute and work the same w.r.t attribute user-select.
webkit-user-select − This attribute works the same w.r.t the attribute user-select. The Safari browser supports this attribute.
Example 1
In this example, we will first set the main title of the text by using h1 element and p element to set the text paragraph. To disable the text selection highlighting on paragraph it will use internal CSS to start the class of p element i.e. “.no-highlight”. This class sets the value as none in the browser property named user-select(Chrome and Opera browsers disable the text selection).
<!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>
Example 2
In this example, we will create two paragraphs using the p element to display the differentiation of enabling and disabling of 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 the class named i.e “.no-highlight”. Then use the internal CSS to take this reference and by styling different browser properties it disables the text selection.
<!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>
Conclusion
We understood the concept of text highlighting by enabling and disabling it. In the above output, it has visible that the first text is highlighted when the cursor moves to the text, and in the second paragraph, the text is not highlighted because disabling browser properties are used in internal CSS.
6K+ Views
