How to disable text selection highlighting in CSS

In many cases, web browsers allow the user to select text elements on a page. However, this may not be the desired option in specific situations. You may want to avoid such behavior when adding buttons, links or any other non-standard elements to your HTML code.

To solve such an issue, you may add the following CSS code to your project. Then, you can use "disable-select" class to disable text selection on a desired element:

.disable-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Old version of Firefox */
    -ms-user-select: none; /* Internet Explorer or Edge */
    user-select: none; /* All modern browsers */
}

As you see, our block of code contains rules for modern and old browsers, so it should work on as many devices or platforms as possible.

Below, we've created a very simple HTML example. The first line is a regular text. However, the second line can not be selected because we've applied the "disable-select" class.

<p>This is a regular text!</p>
<p class="disable-select">This text is <strong>not selectable!</strong></p>

Please see how it works in the preview window below. You can try to select text and see the difference. The second paragraph can not be selected.

user-select property

This CSS property specifies how the text can be selected by the user. Also, it's possible to disable text selection at all. See possible options below:

none

You can use this value to disable text selection on the desired element and on its sub-elements.

auto

This is the default value and it's determined by the browser how the text can be selected. For example, the '::before' and '::after' pseudo-elements will have 'user-select' property set to 'none' value. Regular HTML elements will have the 'text' value, while the editable elements will have 'contain' value.

text

The text can be selected

all

Changes the behavior of text selection. If this value is set, then all text can be selected with a single mouse click, instead of a double click.

contain

This value is a part of CSS UI 4 specification and may not be supported by some browsers. It means that text selection can not be extended to outside of the specific element.

Standard HTML elements

According to W3C specifications, some HTML elements must have text selection disabled by default, here is the example for reference purposes only:

button, meter, progress, select { user-select: none; }

This means that buttons, or any other similar elements, will be excluded from the selection. Although, the actual implementation may vary from browser to browser, and the list given above is not final.

Text selection highlighting may also be disabled on buttons created with the help of tags like <input type="button">, <input type="submit">, file upload buttons, and other similar elements.

Conclusion

There is a very important note here. If you decide to disable the text selection feature on the site, you need to think if it's a benefit in terms of user experience. In most cases, site visitors should not be distracted by unexpected functionality.

There may be specific cases, when people do want to select text content on a page, so before doing any non-standard changes, please ensure that this won't confuse the users.