How to disable text selection in CSS
📣 Sponsor
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.
If you do decide to disable text selection, there is fortunately an easy way to accomplish this in CSS.
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 elementuser-select: all
- tapping once will select the entire elements content.user-select: auto
- the default, lets you select everything like normal.
You can find a full, up to date list of support for user-select on caniuse.
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.
user-select set to none
This is equivalent to user-select: none
.
You won't be able to select this text!
user-select set to all
This is equivalent to user-select: all
.
Tapping once on this will lead to you selecting all of the text.
user-select set to text
This example does not differ too much from user-select: auto
.
You will only be able to select the text in this element.
More Tips and Tricks for CSS
- A Guide to CSS Selectors
- CSS Animations
- CSS Transformations
- How to vertically center text and HTML elements with CSS
- How to do Deletion Animations with CSS
- Using Only CSS to Recreate Windows 98
- CSS Transitions
- CSS Only Masonry Layouts with Grid
- The Interactive Guide to CSS Grid
- How to make a div the same height as the browser window