How do I disable text selection with CSS or JavaScript? [duplicate]

Question

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...

It's 2018 :P Check n try these methods ---> freakyjolly.com/how-to-disable-text-selection-highlighting — Code Spy
– Code Spy, Commented Oct 30, 2018 at 9:39

Shelvacu · Accepted Answer · 2025-06-25 20:04:05Z

355

<div 
 style="-webkit-user-select:none;user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>

edited Jun 25 at 20:04

Shelvacu

4,42028 silver badges47 bronze badges

answered Sep 23, 2010 at 14:44

Jerome

8,4572 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jerome Over a year ago

The CSS for webkit is similar to the one for Firefox, I edited the answer to add it.

mhenry1384 Over a year ago

@daviddarx Works in Chrome 17 and Safari 5.

Dan Over a year ago

Works in IE and Opera after update

JohnK Over a year ago

Is this still good in 2014?

MartyIX Over a year ago

yes, it is caniuse.com/#feat=user-select-none

|

Shelvacu · Accepted Answer · 2025-06-25 20:02:47Z

355

UPDATE June 2025:

According to Can I use, the user-select is currently supported in all modern browsers (but sadly still needs a -webkit- vendor prefix on Safari).

All of the correct CSS variations are:

.noselect {
  -webkit-user-select: none; /* Safari */
  user-select: none; /* Non-prefixed version, 
                        currently supported by all other modern browsers */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

More information can be found in Mozilla Developer Network documentation.

edited Jun 25 at 20:02

Shelvacu

4,42028 silver badges47 bronze badges

answered Feb 16, 2012 at 15:53

Blowsie

40.7k15 gold badges92 silver badges110 bronze badges

5 Comments

BoltClock Over a year ago

"correct CSS variations"...? The only correct CSS "variation" is user-select.

Blowsie Over a year ago

okay so the others are vendor specific prefixes, I'd presume anyone else would class those are correct variations.

Starx Over a year ago

Ha ha, Are you planning on earning all your rep with same answer? NICE :)

Dan Over a year ago

Everyone should know where this works and where does not caniuse.com/user-select-none

Raja Over a year ago

provided solution is not working for opera browser . How to set the user-select option for opera

Nyxynyx · Accepted Answer · 2011-12-21 23:33:31Z

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;

answered Dec 21, 2011 at 23:33

Nyxynyx

64.1k163 gold badges510 silver badges857 bronze badges

3 Comments

naXa stands with Ukraine Over a year ago

easy to be a web dev in 2021: user-select: none; is enough.

Joseph Ali Over a year ago

:( didn't work for me

Otter Over a year ago

@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. 👍

Saurin Dashadia · Accepted Answer · 2021-09-29 05:08:55Z

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.

edited Sep 29, 2021 at 5:08

Saurin Dashadia

1,17811 silver badges26 bronze badges

answered Sep 23, 2010 at 16:20

James Sumners

14.9k11 gold badges62 silver badges77 bronze badges

10 Comments

Robert Over a year ago

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.

James Sumners Over a year ago

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.

arkon Over a year ago

@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.)

James Sumners Over a year ago

@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).

arkon Over a year ago

@jsumners Is it not the website designer's decision how a user interacts with his/her page, regardless of the aesthetic or functional purpose?

|

Saurin Dashadia · Accepted Answer · 2021-09-29 10:16:23Z

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 :)

edited Sep 29, 2021 at 10:16

Saurin Dashadia

1,17811 silver badges26 bronze badges

answered Sep 23, 2010 at 14:42

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

4 Comments

Yahel Over a year ago

You could compress this into one CSS rule. myDiv.webkit::-webkit-selection, myDiv.moz::-moz-selection, myDiv.normal::selection{ background:#000; color:#fff; }

Kyle Over a year ago

@yc: use a multiple selector, I shall edit, thanks :)

daviddarx Over a year ago

#galleryPagesNavigation a.normal::selection { background:#000; } #galleryPagesNavigation a.moz::-moz-selection { background:#000; } #galleryPagesNavigation a.webkit::-webkit-selection { background:#000; }

Kyle Over a year ago

You have "normal" "moz" and "webkit" in there, remove those, copy the updated code out of this answer :)

Collectives™ on Stack Overflow

How do I disable text selection with CSS or JavaScript? [duplicate]

5 Answers 5

7 Comments

5 Comments

3 Comments

10 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

5 Comments

3 Comments

10 Comments

4 Comments

Linked

Related