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

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.

Published on Feb 20, 2019

Tags: The Ultimate CSS Tutorial for Beginner Programmers | user-select

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.


Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.