CSS Quick Tip: Control Text Select With user-select Property

On the web selecting text is natural and self-evident. Although it is the basic behavior there are cases when disabling the text select can be useful.

At this point, we must note that disabling all of the text selection is a terrible idea. You limit your user’s ability which could cause accessibility problems and more; this is indicated because it is a quite common practice – at least here in Hungary – to “protect” your content from “stealing.” There is no way that we can’t select text in some way on a web page or application if we needed. The copyright is another topic than just disabling selecting.

In the old days we used JavaScript to disable some events like onselectstart, onmousedown but today we can manage it from CSS only.

Using user-select Property

We have an entirely new property named user-select which enable us to control selecting behavior at all.

The property has five fundamental values: none, auto, text, contain, all and the cross-browser compatibility has some problem as you see at caniuse.com, so we need some prefix.

See the Pen
CSS Quick Tip: Control Text Select With user-select Property
by Adam Laki (@adamlaki)
on CodePen.

There are to main use case:

  1. disabling the text select on UI elements like buttons and so using user-select: none;,
  2. enabling to select whole sections, paragraphs with just one click using user-select: all;.
.btn {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
p.select-all {
    -moz-user-select: all;
    -webkit-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

For me, the first use case is quite common. When I design and testing a form, I always manage to select buttons accidentally, so I add user-select: none; to my code.

Special thanks for the following recource(s): Icon made by Smashicons from www.flaticon.com
Need a web developer? Maybe we can help, get in touch!