Helping you solve those tough coding problems!

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

Published on Feb 20, 2019 by Jamie Munro

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