Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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?
To disable text selection highlighting using CSS, it can help in preventing the content copying. We can use CSS user-select property to disable the text selection highlighting. In this article, we will be understanding how we can use CSS user-select property to disable text selection highlighting.
we are having a div element with some textual content written inside it. Our task is to disable text selection highlighting using CSS.
Disabling Text Selection Highlighting Using CSS
- We have used a div tag to write the textual content in it.
- After writing the textual content, we have used border to differentiate the non-selectable text.
- We have used "user-select: none;" which disables the text selection.
Example
Here is the complete example code implementing above mentioned steps to disable text selection highlighting using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To disable text selection highlighting using CSS
</title>
<style>
.no-select {
user-select: none;
border: 2px solid green;
}
</style>
</head>
<body>
<h3>
To Disable Text Selection Highlighting Using CSS
</h3>
<p>
In this example we have used <strong>user-select:
none;</strong> property to disable text selection
highlighting using CSS.
</p>
<div class="no-select">
This text cannot be selected by the user.
</div>
</body>
</html>
Conclusion
In this article, we have understood how to disable text selection highlighting using CSS. We have used CSS user-select property on div element to disable the text selection.
Updated on: 2024-08-19T16:19:59+05:30
9K+ Views
Advertisements