11

I have been trying to apply user-select for both Opera 10.62 and IE9 without success. I can't/won't bind events with JavaScript that preventDefault(), because there are so many places to be set unselectable and I still need to retain selections in several places. In fact, I want the default behavior to be unselectable for the whole document, and as for that I have set the following in my stylesheet:

* {
    -o-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Everything works great with Firefox 4, Chrome 7 and Safari 5. Only IE9 and Opera 10.62 are not working as I would like them to. Any ideas?

PS: I'm targeting modern browsers.

Tower
  • 98,741
  • 129
  • 357
  • 507

5 Answers5

7

Did you try using ::selection {color:currentColor;background:transparent}?
For Firefox you can use ::-moz-selection.

https://developer.mozilla.org/En/CSS/::selection
http://msdn.microsoft.com/en-us/library/ff974109(v=VS.85).aspx
http://reference.sitepoint.com/css/pseudoelement-selection

// update //
There's also the unselectable property.
Knu
  • 14,806
  • 5
  • 56
  • 89
  • 1
    Yeah, but that's not really good because it just hides the selection. You can still drag the selection and copy it. – Tower Oct 15 '10 at 07:19
  • check my update - and read https://developer.mozilla.org/en/CSS/-moz-user-select "Controls the appearance (only) of selection. This does not have any affect on actual selection operation." – Knu Oct 15 '10 at 08:22
  • 1
    A combination of the -user-select properties and unselectable worked a treat for me cross-browser. – ajcw Mar 07 '11 at 16:38
  • Shouldn't `color: currentColor` be `color: inherit`? – acme Jun 27 '12 at 08:54
  • @acme you want the current color of the element (not of one of his ancestors). – Knu Jun 28 '12 at 13:33
  • Ah ok, I learned something new today: I didn't knew there is the `currentColor` keyword. – acme Jun 28 '12 at 13:57
  • If suppose there is a `span` in a `div`, and the `div` has a gradient as a background color, will this still work for the text inside the `span`? – SexyBeast Aug 31 '13 at 19:05
  • disable user-select with CSS will not work in IE 8 & 9 – dude Dec 11 '14 at 19:52
4

You can use combination of -webkit-user-select: none;, -moz-user-select: none; and specific property unselectable="on", as I described here:

How to make text unselectable on HTML page

Martin Suchan
  • 10,600
  • 3
  • 36
  • 66
2

user-select isn't a standard CSS3 property, which is why there is no user-select or -o-user-select or -ms-user-select. It used to be in the old user interface spec, but that was superseded by the Basic UI spec. It will likely never be implemented by either browser, unless it is added back to the spec.

User selection is a behaviour rather than a style, so it is best to use JavaScript. As Knu mentions above, you can use unselectable instead.

David Storey
  • 29,166
  • 6
  • 50
  • 60
  • 3
    But what's awful is that children do not inherit `unselectable`. So, I would need to apply that for pretty much everything, manually. I have a application with text here and there, and by default I want everything unselectable. Only when I specifically want selections, I will define them. This approach is not implementable with `unselectable`. Also, the property works if you begin the selection on that element. Ctrl + A, etc. will work with `unselectable`. – Tower Jan 15 '11 at 14:05
  • Actually Opera does have `-o-user-select`. Not sure which version but I think 10.6 had it. – Tim Down Jun 17 '11 at 15:53
  • 1
    @Tim Down: I'm pretty sure Opera doesn't support -o-user-select. It isn't listed in our spec http://www.opera.com/docs/specs/presto29/css/o-vendor/ and it doesn't show up in Opera Dragonfly either. – David Storey Jul 02 '11 at 20:33
  • @dstorey: A quick test would suggest you're right: http://jsfiddle.net/MguY2/. I did test this a while ago and thought it was supported, but it seems I was wrong. – Tim Down Jul 03 '11 at 00:49
  • 3
    -ms-user-select exists in IE10. Not 9. – McTrafik May 07 '12 at 23:49
0

Using jquery:

$('.element').mousedown( function(e) {
    e.preventDefault();
});

But you may have to add it both to the element and it's container.

Jivko
  • 1
0

-ms-user-select: none;

seems to work fine now (IE 10/11)

halfbit
  • 3,773
  • 2
  • 34
  • 47
  • Wow! I thought IE11 was supposed to support the official standards without the need for browser specific hacks! When they introduced support for this, why not go directly on the standard without browser prefix ??!!! (And yes - I tested in IE 11; it only works ***with*** the `-ms-` prefix) – awe Apr 15 '14 at 09:12