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:
On HTML elements that trigger events, especially on mobile - where tapping or double tapping might lead to text selection.
On drag and drop interfaces, where a user has to drag an element - we don't want that drag to trigger text selection too.
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;
}