How to make HTML Text unselectable

Nitty-gritty: Cross-browser support and more

Making your text unselectable will save it from becoming an easy prey. But before we proceed, please consider the ramifications of such action. Remember, with great power comes great responsibility!

Working across browser timelines

Although user-select: none works as a ninja in modern browsers, we need to ensure its stealthiness remains even in older browsers. Equip it with its stealth weapons – vendor prefixes:

.unselectable {
  -webkit-user-select: none; /* Disguise for Safari, Chrome and Opera */
  -moz-user-select: none;    /* Cloak for Firefox */
  -ms-user-select: none;     /* Camouflage for Internet Explorer */
  user-select: none;         /* Default suit for everyone else */
}


JavaScript: Treatment for Amnesiac Browsers

For those browsers that suffer from chronic amnesia, forgetting all about CSS, we call upon JavaScript to remind them how to keep our text unselectable:

document.getElementById('unselectable-text').addEventListener('mousedown', function(event) {
  event.preventDefault(); // "Hey there cursor, 'Keep Calm and Don't Select!'"
}, false);


Making jQuery work for us

You can delegate the task to jQuery. It can ensure that all elements, even those who are notoriously late to the party, won't get selected:

$.fn.unselectable = function () {
  return this.each(function () {
    $(this).css({
      'user-select': 'none',
      '-webkit-user-select': 'none',
      '-moz-user-select': 'none',
      '-ms-user-select': 'none'
    }).on('selectstart false', function () {
      return false; // jQuery here confirming, "Yes boss, order received!"
    });
  });
};

$('.unselectable').unselectable(); // Breathe easy, jQuery's got your back.


The Over-enthusiastic Selectors

Remember, only apply the unselectable class where necessary. Save yourself from being that person, applying a property globally and then wondering why it isn't working!

.unselectable:not(input):not(textarea):not(button) {
  user-select: none; // Oh look! These elements still listen to your users!
}


Good power, Good responsibility

Before you switch to stealth mode, remember, it might confuse your users. So think twice, code once!

Tackling specific scenarios: the right tool for the right job

Did you find your elements in a mess after preventing text selection? Perhaps you need to consider two additional things.

Crafting the art of invisibility

Random selection of HTML elements for the unselectability treatment can result in unforeseen consequences! Be wise!

.unselectable > p, .unselectable > span {
  user-select: none; // Know your elements, before making them disappear!
}


Keeping the Cursor Calm

Despite your text acting like ninjas, the cursor is not your enemy. Keep it normal even on hover:

.no-select {
  user-select: none;
  cursor: default; // Why freak out the cursor?
}
