CSS Unselectable Cross-browser Property

The user-select CSS Property determines whether the content of an element is selectable. To loosely disable this ability, use the following cross-browser solution.

.unselectable {
   -moz-user-select: -moz-none;
   -ms-user-select: none;
   -khtml-user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}
/* override unselectable */
.unselectable {
   -moz-user-select: auto !important;
   -ms-user-select: auto !important;
   -khtml-user-select: auto !important;
   -webkit-touch-callout: auto !important;
   -webkit-user-select: auto !important;
   -o-user-select: auto !important;
   user-select: auto !important;
}
This post is available on GitHub.
Posted .

6 comments

  1. anonymous

    Pandora does this! eww

  2. anonymous

    there should be .selectable in the second part of code. isn't it?

  3. anonymous

    >> there should be .selectable in the second part of code. isn't it?

    no there shouldn't be. the ".unselectable" in the second part overrides the first part with the !important.

  4. anonymous

    in ie8?

  5. anonymous

    for ie, use -ms-user-select

  6. anonymous

    "-moz-user-select: none;" instead of "-moz-none" is now available starting with Firefox 21.

Leave a Reply