When we create web pages it’s not ideal to stop users from selecting the text. It marginalised the users’ right to select the text they want to and they get furious over this small change. Generally, we should not disable text selection to give users experience of the best of our websites. It should be at their discretion whether they want to select the text or not like what we do most of the time.
However, it used to be a standard practice when the web was still new and the webmasters wanted to stop scrappers from copying text and plagiarizing the contents. Though that was a small number of websites that used to do that. Now, that era is over. The users are given more freedom to experience the web the best way they want to.
Despite all that, the webmasters, even today, know that disabling or enabling text selection can provide users with more and they can actually benefit from it and the webmasters can use CSS property to do that.
One such example to provide users with more ease while surfing the web is, on mobile devices, the HTML elements trigger events when the tapping on text leads to selection of the text. Also when they want to drag elements that could lead to text selection as well that we definitely would not want it to be nor would the users like that.
The other example is when the users use custom web-built apps where the administrators are required to limit the text selection property to a certain degree as while using the text editor the users would certainly not want to experience the text selection while making the text bold as it’s supposed to be just a button instead.
How to Disable or Enable Text Selection Using CSS?
However, for all those who want to know how to disable text selection using just CSS on a website we have mentioned the way to disable that on certain elements if you want to for whatever reason you want to.
Today’s all popular web browsers have a built-in ‘user-select’ property which can be triggered to make HTML elements unselectable at will. There’s a small piece of additional CSS that you want to add. For instance if you are an administrator and want all buttons not to be selectable just add the following:
button {
-webkit-user-select: none;
user-select: none;
}Please understand we need to use-webkit-user-select as it would not work in Safari. Despite the fact that not many users prefer using Internet Explorer still if you want to add the text selection you need to add -ms-user-select: to make it work on IE.
button {
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}Adding this small piece will stop user text selection. You should know that user-select comes with additional properties but due to varied support we need to restrict ourselves for this use-case here.
user-select: none /**Adding this will trigger 'no user select on the element.*/user-select: text /**Adding this property will trigger selecting the text within element.*/user-select: all /**So if we add this, tapping once will trigger selection of all text for the users*/user-select: auto /**This is what we use normally and the users are also familiar with*/To show you how each works, here are some examples. Note, both text and all have limited Safari support, so consider trying these out in Chrome.
We have described below how we can use each one of these. You should keep in mind that Safari offers limited support for text and all so we need to try these exceptions in Chrome. It supports all of these fully and that’s what makes it ideal for everyone.
We need to understand that user-select property means whether a certain text can be selected or not generally. The developers use it to prevent or allow text selection.
- So when we add
user-select: noneit prevents selection of any text piece. Even if the users want to select it they can’t - When we set the property
user-selecttoallit triggers the text selection with a single click instead of a double-click on the web pages. - When we set
user-selecttotextthe users can select the text whatever piece of it they want.
So basically, user-select: text and Auto are the same. Both are at the discretion of the users whether or not they want to select the text.
So this is how we can disable or enable text selection using CSS with these simple examples. The user-select CSS property lets you control all these features with just an addition of a word.
