How to disable text selection in HTML with CSS

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

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.

Article by:

Aphinya Dechalert

Aphinya Dechalert

Aphinya is a skilled tech writer with field experience in software development, agile, and fullstack JavaScript. She is a dev advocate and community builder, helping others navigate their dev journey.

More posts...

CSS

How to create rainbow gradient text colors in CSS

Rainbow gradients are everywhere. They're cool and fun looking. The text is also fully readable by bots. Here are some cool examples in the wild: Vercel - cloud platform But how is it done?   The magic lies in linear-gradient, -webkit-background-clip and -webkit-text-fill-color Here's the quick code snippet for it 👇 h1{

CSS

Creating 3D Pure CSS Hover Flip Card Effect

When it comes to front-end, your aesthetics implementation skills are limited by how well you can make CSS do whatever you want it to do. A pure CSS hover flip card effect is something that we often see in portfolio sites and splash pages. They can also be modified to

CSS

Create An Animated Search Box Using HTML, CSS, & 2 JavaScript Functions

Have you ever wondered how those fancy expanding search boxes or forms are done? While it looks cool and feels like it could be complicated to code, it turns out to be quite simple. All you need is a few lines of HTML, a good dash of CSS, and two

CSS

Pure CSS Social Media Buttons With Tooltip Hover Effect

Social media icons are a staple of web design. Most of the time, designers and developers just settle for a simple button with the social icon slapped on it. But let’s get real — basic and standard icons are boring. They’re everywhere and nothing makes them stand out. In