标签云

微信群

扫码加入我们

WeChat QR Code

我如何禁用文本选择CSS或JavaScript呢?[重复]

Possible Duplicate:
CSS rule to disable text selection highlighting

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


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

2018年05月27日25分01秒

daviddarx Works in Chrome 17 and Safari 5.

2018年05月27日25分01秒

Works in IE and Opera after update

2018年05月27日25分01秒

Is this still good in 2014?

2018年05月28日25分01秒

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

2018年05月27日25分01秒

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

2018年05月27日25分01秒

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

2018年05月28日25分01秒

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

2018年05月27日25分01秒

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

2018年05月27日25分01秒

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

2018年05月28日25分01秒

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.

2018年05月27日25分01秒

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.

1970年01月01日00分03秒

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

2018年05月27日25分01秒

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

2018年05月27日25分01秒

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

2018年05月27日25分01秒

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

2018年05月27日25分01秒

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

2018年05月27日25分01秒

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

2018年05月27日25分01秒

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

2018年05月27日25分01秒