308

I am making a HTML/CSS/jQuery gallery, with several pages.

I indeed have a "next" button, which is a simple link with a jQuery click listener.

The problem is that if the user click the button several times, the text of the button is selected, and then the full line of text. In my really darky design, that is really ugly and nonsensical.

So here is my question: Can you disable text selection on HTML? If not, I'll terribly miss flash and its high level of configuration on textfields...

1

5 Answers 5

351
<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>
7
  • 1
    The CSS for webkit is similar to the one for Firefox, I edited the answer to add it.
    – Jerome
    Sep 24, 2010 at 5:53
  • 1
    @daviddarx Works in Chrome 17 and Safari 5.
    – mhenry1384
    Feb 29, 2012 at 22:02
  • 1
    Works in IE and Opera after update
    – Dan
    Jul 18, 2013 at 13:56
  • 2
    Is this still good in 2014?
    – JohnK
    Jan 22, 2014 at 19:31
  • 5
    yes, it is caniuse.com/#feat=user-select-none
    – MartyIX
    Aug 23, 2015 at 11:37
348

UPDATE January, 2017:

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix).


All of the correct CSS variations are:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Note that it's a non-standard feature (i.e. not a part of any specification). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.


More information can be found in Mozilla Developer Network documentation.

5
  • 14
    "correct CSS variations"...? The only correct CSS "variation" is user-select.
    – BoltClock
    May 6, 2012 at 6:08
  • 16
    okay so the others are vendor specific prefixes, I'd presume anyone else would class those are correct variations.
    – Blowsie
    May 8, 2012 at 7:51
  • 3
    Ha ha, Are you planning on earning all your rep with same answer? NICE :)
    – Starx
    Nov 7, 2012 at 4:31
  • 3
    Everyone should know where this works and where does not caniuse.com/user-select-none
    – Dan
    Jul 18, 2013 at 13:54
  • 1
    provided solution is not working for opera browser . How to set the user-select option for opera
    – Raja
    Nov 18, 2013 at 5:44
37

Try this CSS code for cross-browser compatibility.

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
3
  • 4
    easy to be a web dev in 2021: user-select: none; is enough. Apr 15, 2021 at 16:48
  • :( didn't work for me
    – Joseph Ali
    Mar 27, 2022 at 15:53
  • @naXastandswithUkraine not in Safari unfortunately, and this is assuming everyone keeps their browser up-to-date, which they annoyingly don't. Still with using all the above mentioned for now. 👍 May 27, 2022 at 12:08
6

You can use JavaScript to do what you want:

if (document.addEventListener !== undefined) {
    // Not IE
    document.addEventListener('click', checkSelection, false);
} else {
    // IE
    document.attachEvent('onclick', checkSelection);
}

function checkSelection() {
    var sel = {};
    if (window.getSelection) {
        // Mozilla
        sel = window.getSelection();
    } else if (document.selection) {
        // IE
        sel = document.selection.createRange();
    }

    // Mozilla
    if (sel.rangeCount) {
        sel.removeAllRanges();
        return;
    }

    // IE
    if (sel.text > '') {
        document.selection.empty();
        return;
    }
}

Soap box: You really shouldn't be screwing with the client's user agent in this manner. If the client wants to select things on the document, then they should be able to select things on the document. It doesn't matter if you don't like the highlight color, because you aren't the one viewing the document.

10
  • 25
    Soap box rebuttal: I have a button which, when clicked, runs some javascript to change the scale of a picture. There is no reason for the user to select the "+" or "-" inside that button, but most web browsers will end up with the text selected after a few button clicks. Similarly, if you're doing drag-and-drop via javascript, you don't want to select the things you drag something over. That said, I appreciate the fact that you still answered the question even though you disagree with the goal.
    – Robert
    Apr 6, 2012 at 16:59
  • 2
    I'll concede that there are circumstances where it can be a valid design choice. But the question mentioned he'd miss Flash with the implication that he'd miss being able to control the user's client. I disagree with that mode of thinking. As a user, I do not like site's redefining how my local software works. It's also an accessibility issue. Apr 6, 2012 at 17:16
  • 2
    @jsumners There are plenty of circumstances. Do some out-of-the-box thinking and you'll come up with multiple scenarios. Just because browsers enable this by default does not mean we as programmers should conform. Besides, mobile computing is doing away with traditional means of text selection. So it's becoming increasingly relevant. You make it sound like it's some kind of obsolete hack or something, it's a supported feature (see answers above.)
    – arkon
    Oct 1, 2012 at 21:49
  • @b1naryatr0phy again, the OP specifically described a scenario in which he wanted to control the user's client purely for aesthetic reasons. His goal had nothing to do with function, be it touch or otherwise. In particular, he states that he would miss the ability to completely control the user's interaction like he could with Flash. I believe that is a broken way of developing for the web and said as much after providing a solution that doesn't rely on potentially unimplemented CSS features (at the time). Oct 1, 2012 at 22:48
  • 2
    @jsumners Is it not the website designer's decision how a user interacts with his/her page, regardless of the aesthetic or functional purpose?
    – arkon
    Oct 1, 2012 at 23:47
5

I'm not sure if you can turn it off, but you can change the colors of it :)

myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
    background:#000;
    color:#fff;
}

Then just match the colors to your "darky" design and see what happens :)

4
  • 1
    You could compress this into one CSS rule. myDiv.webkit::-webkit-selection, myDiv.moz::-moz-selection, myDiv.normal::selection{ background:#000; color:#fff; }
    – Yahel
    Sep 23, 2010 at 14:44
  • @yc: use a multiple selector, I shall edit, thanks :)
    – Kyle
    Sep 23, 2010 at 14:48
  • #galleryPagesNavigation a.normal::selection { background:#000; } #galleryPagesNavigation a.moz::-moz-selection { background:#000; } #galleryPagesNavigation a.webkit::-webkit-selection { background:#000; }
    – daviddarx
    Sep 23, 2010 at 14:48
  • You have "normal" "moz" and "webkit" in there, remove those, copy the updated code out of this answer :)
    – Kyle
    Sep 23, 2010 at 14:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.