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;
}

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