How to Disable Text Selection Highlighting

It’s default behavior to be able to select text. Virtually every application, operating system and device allows for text selection in some capacity.

When you are building websites, sometimes you may actually want to disable this default behavior. The reason will vary, but some reasons are:

• You are using icon fonts and there’s no real reason to select the icon
• An element is interactive and drag and drop also selects text
• You have a double click action and double clicking also selects text

Personally, I would stay away from removing the ability to select text in order to prevent theft of your text. People may want to grab an excerpt of copy to tweet or share in some other way. I also select text as I read to help me keep track of where I am. But I digress.

Diving into user-select

This is how you remove the ability to select text with CSS.

<style>
  .text-block {
    user-select: none;
    -webkit-user-select: none;
  }
</style>

<p class="text-block">You can't select this text!</p>
<p>You can select this text!</p>

The UX around user-select

Now that you have a little more knowledge of user-select, please use it carefully! Think twice about removing the ability to select text. There may be other UX solutions that you can implement that would provide a better overall experience to people.