Follow @endyourif rss Facebook LinkedIn

Disabling text selection/highlighting with CSS Disabling text selection/highlighting with CSS

Published on Feb 20, 2019

You want to prevent text from being selected/highlighted; whether to prevent copying and pasting or accidental text selection.

To solve this problem you will want to set the†user-select†CSS property to†none.

Disable text selection with user-select

Because each browser is slightly different, the CSS is slightly convoluted because each browser has a slightly different prefixed version of the†user-select. Let's take a look at the example:

In the above example, try selecting the header Title. It is unselectable; however, you can click the button. The†user-selectproperty prevents (in this example) all text button being selectable.

If you only wish to apply it to specific elements, you could update the example replacing * with a class name.

Tags: CSS | user-select

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP