How to disable text selection in HTML with CSS

Aphinya Dechalert -

If you're just here for the code snippet, here is the quick rundown of it.

  • set user-select to none in your CSS.

What is user-select in CSS?

It's a CSS property that lets you specify if a text element can be selected. For example, if you hold your mouse over some text, you can select it. With user-select: none, this won't happen.

The opposite of user-select: none is user-select: text, which will make the content selectable.

Here some code sample snippets:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

The HTML example for disable text selection:

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

user-select properties

user-select has more than just none and text.

Here's the list of all user-select properties and what they do:

  • user-select: none - no user select on the element.
  • user-select: text - you can only select the text within the element
  • user-select: all - tapping once will select the entire elements content.
  • user-select: auto - the default, lets you select everything like normal.

It's good to note that text and all properties have limited support on Safari, but work seamlessly on Chrome.

When is it OK to disable text selection?

Now, the question becomes - when and where would you disable text selection?

Here is a quick list of common cases:

  • anchor tags styled as buttons
  • in article asides like calls to action, ads, or something else that's not part of the main content
  • emojis 🤪 (because no one wants :grinning_face_with_one_large_and_one_small_eye: or :zany_face:)

control the user experience and stop them from seeing unneeded highlights for whatever reason they're highlighting for, eg:

  • double tapping triggers on mobile
  • drag and drop elements where you don't want to also trigger the text selection
  • custom-built web apps where you don't want the text to be selected

How to prevent disable text selection examples

One way is to wrap your non-text content (like emojis 😎😛😊) with user-select: none .

<p>I am a zanny <span style="user-select: none">🤪</span> faced batcat</p>

While having styling directly inside content is not ideal, you can easily switch it out with a class.

<p>I am a zanny <span class="disable-select">🤪</span> faced batcat</p>

The CSS:

.disable-select { user-select: none; }

It's the same concept for links that looks like buttons. Just add it as a class to prevent it from being selected by the user when they're highlighting the text.

Controlling the user experience beyond regular desktop browsers

user-select: none comes in quite handy for touch devices, where touch inputs makes it prone to accidental highlights. So, rather than seeing user-select: none as a reductive element, it is functions to enhance user experience.

One way to prevent accidental selection is to set user-select: none as the default on body, then add user-select: text for things that you specifically want to be selectable. This makes the process of selectable content more intentional and planned.