Browsers, by default, let us select the text on a webpage using the mouse as well as the keyboard(Ctrl+A on windows). But, you might sometimes need to prevent this default text selection for a particular element or the whole webpage itself.
With CSS we can very easily achieve this. All you need to do is apply user-select: none; on the element that you want to disable text selection.
The following example disables the text selection on a div element:
Example:
div{
user-select: none;
}
The above fix might not work perfectly in all the browsers. If you want to prevent user selection for all the browsers, you have to use browser prefixes.
This is how you can do this:
Example:
div{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Disable text selection for the whole page
If you want to disable the text selection for the whole page, you can do this by applying user-select: none; on the body element.
Here is a working example of it:
Example:
body{
user-select: none;
}
You can read more about the user-select property here-> CSS user-select property
