When is it ok to disable text selection?

On a web page, we typically should not disable text selection, but there are a few cases where having it enabled can take away from the user experience. Normally, we do not want to take away a user's ability to select text, as that will lead to a bad user experience.

There are a notable number of examples where disabling text selection can actually improve user experience. For example:

  1. On HTML elements that trigger events, especially on mobile - where tapping or double tapping might lead to text selection.

  2. On drag and drop interfaces, where a user has to drag an element - we don't want that drag to trigger text selection too.

  3. On many other custom web-built user applications where text selection needs to be limited to certain elements or situations. For example, on a text editor, we usually don't want the button that makes text bold to be selectable, since it is a button.

How to disable text selection in CSS

All modern browsers support the user-select property, which makes any HTML element unselectable. For example, if you wanted the button not to be selectable, you could write the following:

button {
    user-select: none;
}