How to disable text selection highlighting in CSS

Web browsers allow to select text elements on a page, but 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.

You may add the following CSS code to your project and use "disable-select" class to disable text selection on a specific 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 code block contains rules for modern and old browsers, so it can work on as many devices or platforms as possible.

Below, we've created a very simple example. The first line is a regular text, but the second line is not selectable.

<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 it's sub-elements.

auto

This is 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 may also be disabled on buttons created with <input type="button">, <input type="submit"> tags, file upload elements, or other their variations.

Conclusion

The important note here is that when disabling text selection on the site, you need to think if it's a benefit in terms of user experience. Site visitors should not be distracted by an 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.

Thank you for reading this article. If you have something to add, you can post your suggestions or comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *