On a web page, we typically should not disable text selection, but there are a few cases where having it enabled can take away from the user experience. Normally, we do not want to take away a user's ability to select text, as that will lead to a bad user experience. There was a time when a small number of websites would stop users copying article text as a method of stopping plagiarism, but thankfully that is far less common today.
Having said that, there are a notable number of examples where disabling text selection can actually improve user experience. For example:
- On HTML elements that trigger events, especially on mobile - where tapping or double tapping might lead to text selection
- On drag and drop interfaces, where a user has to drag an element - we don't want that drag to trigger text selection too.
- On many other custom web-built user applications where text selection needs to be limited to certain elements or situations. For example, on a text editor, we usually don't want the button that makes text bold to be selectable, since it is a button.
Fortunately there is an easy way in CSS to disable text selection on certain elements if you need to.
How to disable text selection in CSS
All modern browsers (with the exception of some versions of Safari) support the user-select property, which makes any HTML element unselectable. For example, if you wanted all buttons not be selectable, you could write the following:
button {
-webkit-user-select: none;
user-select: none;
}
We have to use -webkit-user-select since Safari still requires it. If you want to support Internet Explorer (which is becoming less and less common), you can also use -ms-user-select:
button {
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
This single property will stop user selection. user-select also has other properties, in theory, but the support for these vary.
-
user-select: none- no user select on the element. -
user-select: text- you can only select the text within the element -
user-select: all- tapping once will select the entire elements content. -
user-select: auto- the default, lets you select everything like normal.
The support for each of these varies, but you can find a full, up to date list of support for user-select on caniuse.
To see some demos on this, check out the original article here.
Top comments (6)
Yes ideally use a button, but in practice on the web, sometimes, for one reason or another, events are attached to non-buttons. Anyways, buttons are selectable on drag, which kind of relates to the other points - if you are dragging an HTML element through other HTML elements, lots of browsers handle this differently. On a project I worked on a year or two ago, I found Safari, for example, causing all sorts of weird text selection behaviour - where dragging an HTML element past others led to background selection, amongst other things.
I think I'm clear in saying disabling text selection should not be the default solution, but it is indeed a solution to some UI problems and a useful one at that.
the most important sentence:
100% agree, it's better to pick familiarity over aesthetic from a UX and accessibility perspective. Those are the cases in which I have used
user-select: nonein the past: disable text selection on inline SVG images and on mobile hybrid apps.A valid use case: prevent an overlay element from making underlying text unusable, even where there is no text content inside. Adding
user-select: none;to the upper element can provide a quick workaround at least.That demo doesn't work on mobile, where users can select the button with long press without having to select it as part of the text around it.
Most wanted article 😁🙏 thanks for your efforts to write this detailed guide 🤘🚩