标签云

微信群

扫码加入我们

WeChat QR Code

This question already has an answer here:

I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers.

I might be able to solve this with a JavaScript trick (I'd like to see those answers, too) -- but I'm really hoping there's something in CSS/HTML directly that works across all browsers.


While many of the examples listed here work, keep in mind nothing prevents someone from just looking at the source code and copying the text.

2018年08月15日25分18秒

Depending on your needs stackoverflow.com/q/4117466/298479 might also be a valid solution for you.

2018年08月16日25分18秒

you can use this selector [unselectable=on]{...} then you avoid putting extra class

2018年08月15日25分18秒

According to dev.l-c-n.com/CSS3-selectors/browser-support.php , this selector should be supported in IE8 and above, and possibly IE7.

2018年08月16日25分18秒

JoeCoder: Yes, I believe attribute selectors do work in IE 7, although not IE 6.

2018年08月16日25分18秒

Just curious, is there an advantage to using *.unselectable over .unselectable in the stylesheet?

2018年08月16日25分18秒

venimus I would favor classes over xpath selectors like [unselectable=on] in CSS. In jquery they're good if you narrow down to an immediate container first but in CSS, selectors are parsed right to left so it's still a blanket check of every element and every element's unselectable attribute using the performance-meh xpath engine. Likewise, I believe, with the querySelector API which I'm guessing typically hooks into the CSS/xpath selector engines directly. This may change over time as browsers find perf tweaks but I would definitely keep this in mind when supporting IE<=8, maybe <=9.

2018年08月15日25分18秒

Is there any update for the Opera or making elements unselectable still not supported?

2018年08月16日25分18秒

Why are you changing the cusor style to 'default' in the last case? Otherwise +1

2018年08月15日25分18秒

Infact, you are changing it in all cases (indent is misleading)

2018年08月16日25分18秒

According to this Answer, the order of those two webkit settings may be critical, where the -webkit-user-select: should come before the -webkit-touch-callout:. I have not verified this.

2018年08月16日25分18秒

This doesn't work for me in firefox.

2018年08月16日25分18秒

This is IE only attribute. which makes it redundant.

2018年08月16日25分18秒

Worked perfectly for our app (we only target IE users).

2018年08月15日25分18秒

This was the only way I could get the effect needed for text selection happening in IE11 when doing a shift-click select in an ag-Grid.

2018年08月16日25分18秒

Likewise in Safari/Chrome/etc. -khtml-user-select:none;

2018年08月16日25分18秒

Is this likely to appear in the CSS standards though?

2018年08月16日25分18秒

This is what flickr does

2018年08月16日25分18秒

This kind of hack is terrible. I'd avoid it personally.

2018年08月16日25分18秒

The tiny little problem with this method are the links, as you mentioned, and any other interactions you'd want to have with the main window...

2018年08月15日25分18秒

I guess body might not be accessible in DOM before it has content, thus you can't set it's style before you write something in the document.

2018年08月16日25分18秒