The importance of the CSS user-select property

A small detail can completely change how a product is perceived and the user-select property is one of those. Let’s talk about one of the most underestimated CSS properties and see why you should start using it right now in your projects.

What is the user-select property and why is important?

Basically user-select is a CSS property that makes an element unselectable. This property is important because it allows to remove unnecessary details from the page when the user is selecting content, leading to a better user experience. Arguments and real use cases are following.

Removes unnecessary details when a user selects content

For instance when it comes to copying and pasting text, we want to do it as quickly as possible. Let’s take a well known website for this example: below you can see what happens on Medium when selecting a paragraph.

I think this happened to you at least once in your lifetime: I wanted to copy the paragraph but actually I copied the number of claps, the paragraph, the tags and other things. When this happens, we have to dismiss the current selection and select the paragraph again and more carefully. Do we really need to select the tags or the number of claps? Are they meant to be selectable? I’ve never had to select this type of elements, I would also spend less time in writing directly the number of claps than copying and pasting it.

Now, this is what would happen using the user-select property on non-relevant elements, watch the video below.

As you can see I selected the paragraph even if I accidentally passed on other elements and this saved me some time.

Makes content cleaner

Actually you can use the property to make your website more clean. Let’s take a look at Airbnb.

This is weird, let’s try to be realists: none will ever select the text of your buttons, your logo or your navigation links. People may select (and copy?) the messages you are communicating to them. There may be exceptions but you can handle all of this. Let’s use user-select, take a look at the video below.

Doesn’t it look better? The menu, the button and the logo are now unselectable, and for example, if the button is a link you can still copy it.

Unselectable snippet

If you want to give it a try, what follows is the cross browser CSS code you should use to make an element unselectable.

.unselectable, [unselectable="on"] { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

It’s supported by all major browsers (browser compatibility table). You can even support older ones using the unselectable HTML attribute, take a look at the following usage example.

<div unselectable="on" class="unselectable button">Read more...</div>

You can use a unselectable class and the unselectable attribute as fallback, remember to set the same attribute value as in the previous example. Take in mind that thanks to the attribute selector you can just use this syntax.

<div unselectable="on" class="button">Read more...</div>

The attribute is matched by CSS and also by older browsers not supporting the property, so you can just use this compact version!

Conclusion

You’ve seen the benefits that the user-select property can bring to your products, what I showed you are just experiments but it seems that there are good arguments to take this property more into consideration. How about trying using user-select in your next project?