Texts are the most fundamental elements of any website or web page. In this tutorial, we have shared how to disable text selection highlighting using CSS? Along with the CSS user-select Property definition and usage, syntax, values, supported browsers, Steps to disable the text selection with CSS, and Example Codes on How to disable text selection highlighting using CSS?
- CSS user-select Property
- user-select property values
- How to disable text selection using CSS
- Example on How to disable text selection highlighting in the browsers using CSS?
- Steps to Disable Text Selection In WebPage Using CSS
CSS user-select Property
Theuser-select
property defines whether the text of an element can be selected. In various web browsers, in case you double-click on some particular text it will be selected/highlighted. To be unselected or disabled, this property can be used.
Default value: | auto |
---|---|
Inherited: | no |
Animatable: | no. |
Version: | CSS3 |
JavaScript syntax: | object.style.userSelect=”none” |
CSS Syntax
user-select: auto|none|text|all;
Do Check:
user-select property values
user-select value | description |
---|---|
none | user cannot select the text |
text | user can select the text |
all | user can select the text with one click |
auto | user-select value depend upon its parent user-select option |
contain | selection will be bound to a particular element |
element | IE version of user-select contain. |
How to disable text selection using CSS
By default browsers let us select the text in the browser using the keyboard, pressing the cmd-A combination on a Mac for example, or using the mouse.
How can you disable that, to make your web page behave more like an app and less like a document?
Use the user-select: none;
CSS rule.
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
One thing I use sometimes is to make all the app interface unselectable applying user-select: none;
on the body element, then I can re-enable it on specific elements, using:
user-select: text;
Also, observe what statements that we can use for different browsers to disable a selectivity of text.
- Chrome, Opera: -webkit-user-select
- Safari: -webkit-touch-callout
- Mozilla: -moz-user-select
- Internet Explorer: -ms-user-select
Example on How to disable text selection highlighting in the browsers using CSS?
At present, browsers only assist a small subset of CSS properties for::selection
pseudo-element like color, background-color and text-shadow. Let’s see an example:
::selection { color: none; background: none; } /* For Mozilla Firefox */ ::-moz-selection { color: none; background: none; }
Steps to Disable Text Selection In WebPage Using CSS
There are two steps that should be followed to disable the text selection in webpage using CSS:
- Make a HTML file and determine markup for webpage
- Make a CSS file and specify styling to disable the text
Step 1: Make a HTML file and determine markup for webpage
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="disable_style.css"> </head> <body> <h1>Disable Text Selection In WebPage Using CSS</h1> <p class="select">Select The Text In This Paragraph This Is Selectable Like Any Other Text</p> <p class="no_select">Try To Select This Text You Are Not Able To Select This Text In Modern Browsers</p> </body> </html>
Step 2: Make a CSS file and specify styling to disable the text
In this step, we have used the user-select property to disable the text selection and also the cross-browser prefix to work in most of the browser and also with some old browsers.
body { background-color:#EB99FF; font-family:helvetica; text-align:center; margin:0px auto; padding:0px; } h1 { margin-top:100px; color:#424242; font-size:40px; } h1 p { margin:0px; font-size:18px; color:black; text-decoration:underline; } .select { font-size:30px; font-weight:bold; color:#4000FF; } .no_select { font-size:30px; font-weight:bold; color:#4000FF; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }