Menu

Disable Text Selection with CSS

There might be some instances where preventing certain parts of your web page from being selected could be beneficial. In these cases, you could try using the user-select CSS property.

Example

Here’s a style rule for a class named disable-selection that, when applied to an HTML element, will prevent people from being able to select the element:

.disable-selection {
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

Some details about the style rule:

Callout in iOS

Demo

Demo of disabling text selection

View demo

Important Things to Keep in Mind

There’s a catch: user-select is not a standard CSS property included in any W3C specification. Although user-select has a good level of browser support, utilizing the property requires vendor prefixes.

In the prior example, I didn’t use an unprefixed user-select property declaration. That’s because there’s no such property in the eyes of web standards. I would go so far as to analogize the use of user-select as being equivalent to using a proprietary CSS property such as Internet Explorer’s -ms-filter or -ms-text-kashida-space.

Other things to note:

Browser Support

Last updated: March 2015

Browser Version Support
Chrome 6
Firefox 2
IE 10
Safari 3.1

Mobile

Browser Version Support
Chrome (Android) 2.1
Safari (iOS) 3.2

Related Content

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

This was published on Mar 27, 2015

6 Comments

Cathy Mayhue Mar 28 2015

Interesting, but does it work with older versions of these browsers?

IGRACH Mar 31 2015

Well you can with F12 xD

Cierra Luke May 15 2015

Thanks for sharing this post. It helped in solving my problem of text selection.

It seems to work with the latest version of Opera Browser as well.
I like this script, and the idea of it. So your work’s cant just be ‘quick selected’ by jealous competitors.

Thank you.

Harry Jul 29 2015

This will help me to disable text selection on http://www.lyricstym.com/2015/07/queen-zack-knight-raxstar-song.html .. please help me out i don’t want that somebody will copy this

This comment section is closed. Please contact us if you have important new information about this post.

Partners