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
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