标签云

微信群

扫码加入我们

WeChat QR Code


can elements within the element witch has highlighting disabled, have highlighting enabled with in css in the style or class attribute? or in other words, are there other values for -webkit-user-select ect. other than just none?

2018年10月22日18分58秒

'user-select'- Values: none | text | toggle | element | elements | all | inherit - w3.org/TR/2000/WD-css3-userint-20000216

1970年01月01日00分09秒

uihacker.blogspot.com/2011/12/…

2018年10月22日18分58秒

Related: stackoverflow.com/questions/16600479/… = how to allow only some of the child elements to be selected

2018年10月22日18分58秒

There a bug in some browsers where doing "Select All" (CTRL+A and CMD+A) still selects things. This can be fought with a transparent selection color: ::selection { background: transparent; } ::-moz-selection { background: transparent; }

2018年10月22日18分58秒

nice code molokoloco :D , although I personally would stay well away from using it, as sometimes you may need the values different for different browsers, and it relys on JavaScript. Making a class and adding it to your element or applying the css to your type of element in your style-sheet is pretty bullet proof.

2018年10月22日18分58秒

'user-select'- Values: none | text | toggle | element | elements | all | inherit - w3.org/TR/2000/WD-css3-userint-20000216

1970年01月01日00分09秒

Actually -o-user-select isn't implemented in Opera. It implements IE's unselectable attribute instead.

2018年10月22日18分58秒

For some reason, this alone wasnt working in IE8, I then added <div onselectstart="return false;"> to my main div.

2018年10月22日18分58秒

this is ridiculous! so many different ways to do the same thing. let's make a new standard for user selects. we will call it standard-user-select. then we won't have these problems. although for backwards compatibility we should include the others as well. so now the code becomes -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ah, much better.

2018年10月22日18分58秒

you should remove the * selector from your example, its really in-efficient and there really isnt any need to use it in your example is there?

2018年10月22日18分58秒

Blowsie: I don't think so: the CSS 2 spec states that *.foo and .foo are precisely equivalent (in the second case, the universal selector (*) is implied), so barring browser quirks, I can't see that including the * will harm performance. It's a long-standing habit of mine to include the *, which I originally started doing for readability: it explicitly states at a glance that the author intends to match all elements.

2018年10月22日18分58秒

oooh after some further reading, it seems * is only un-effiecient when using it as the key (the righmost selector) ie .unselectable * . Further info here code.google.com/speed/page-speed/docs/…

2018年10月22日18分58秒

Instead of using the class="unselectable", just use the attribute selector [unselectable="on"] { … }

2018年10月22日18分58秒

Francisc: No. As I said to Blowsie earlier in the comments, it makes precisely no difference.

2018年10月22日18分58秒

Don’t forget about ondragstart!

2018年10月22日18分58秒

one more thing here. If you add that to the body then you won't be able to select text inside textareas or input fields in IE. The way I fixed it for IE . body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }

2018年10月22日18分58秒

This can be added as an attribute using jQuery - $("p").attr("onselectstart","return false") This was the only reliable method for me in IE8

2018年10月22日18分58秒

why I have use javascript when I have multi css solutions!..

2018年10月22日18分58秒

Abudayah because they don't work in older versions of Internet Explorer? That's, like, the entire point of this answer.

2018年10月22日18分58秒

The buttons thing would be exactly my motivation.

2018年10月22日18分58秒

Another reason this is needed is Shift-clicking to select multiple rows in a grid or table. You don't want to to highlight the text, you want it to select the rows.

2018年10月22日18分58秒

There are also legal issues where someone else's content is being legally republished but a clause in the license requires web publishers to prevent text from being easily copied and pasted. This is what led me to find this question. I don't agree with the requirement but the company I'm contracting for is legally obligated to implement it this way.

2018年10月22日18分58秒

CraigM The css style doesn't stop a person from grabbing the HTML source and copying it. If you want to protect your content you'll have to find better ways.

2018年10月22日18分58秒

Highly interactive web app with a lot of drag & drop... accidental highlighting is a big usability problem.

2018年10月22日18分58秒

Make sure you also make input fields selectable: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }

2018年10月22日18分58秒

Be very wary about turning off browser UI expectations on ALL code except for one item. What about list items <li /> text, for example?

2018年10月22日18分58秒

Just an update... according to MDN since Firefox 21 -moz-none and none are the same.

2018年10月22日18分58秒

For this you may add cursor:default and cursor:text respectively : )

2018年10月22日18分58秒

"Flat" as opposed to what?

2018年10月22日18分58秒

kojow7 As opposed to "layered". Instead of text floating on top of the other elements. It is similar to the difference between SVG and PNG images.

2018年10月22日18分58秒

I wouldn't recommend doing this, because it doesn't actually fix the issue; disabling text selection - it merely hides it. This can lead to bad usability, because if I drag my cursor around the page I could be selecting any arbitrary text without knowing it. This can cause all kinds of weird usability "bugs".

2018年10月22日18分58秒

Doesn't work on PNG-images with transparent areas: The will always select in a light blue… Any workaround?

2018年10月22日18分58秒

Using transparent in lieu of rgba also works in Chrome 42 on Android.

2018年10月22日18分58秒

Use -ms-user-select: none; (for IE10) and your jQuery "if" should be this: if (($.browser.msie && $.browser.version < 10) || $.browser.opera)

2018年10月22日18分58秒

Be careful man !!! To make it selectable in firefox you must use -moz-user-select: Normal;

2018年10月22日18分58秒

nicholasthery w3.org/TR/2000/WD-css3-userint-20000216#user-select

2018年10月22日18分58秒

mhenry1384 jQuery.browser has been deprecated as of version 1.3 and has been removed in version 1.9 - api.jquery.com/jQuery.browser

2018年10月22日18分58秒

Wynand Good point. But what sort of "feature detection" exists to determine which CSS property to use?

2018年10月22日18分58秒

You could also use title as the attribute.

2018年10月22日18分58秒

That is a very creative solution. Especially if it used the title attribute because that would probably be better for screen readers.

2018年10月22日18分58秒

I tried it (JSBin) and it doesn't work in IE. Unfortunately older IEs are the only ones that user-select doesn't work for.

2018年10月22日18分58秒

The javascript version is not fully working as intended. If you start selecting under the text and then move your cursor up the text will be selecting just fine.

2018年10月22日18分58秒

Gh61 it was because was applied to body and the Run code snippet make a html tag around it, so if apply it to <html> it will do it, look at the update

1970年01月01日00分01秒

This does work in IE so long as the selection starts on an element with the className class. See this JSBin.

2018年10月22日18分58秒

The unprefixed CSS property must be strictly at the end of list of prefixed versions of the property. It is good right practice, other is bad practice making an "new IE" from Chrome/Webkit and leading to so much UGLY THINGS as introducing -webkit prefix support in not webkit browsers. Look, this was already in 2012: dev.opera.com/articles/…

2018年10月22日18分58秒

And I quote: This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.

2018年10月22日18分58秒

Volker E. well, he DOES say that it's for the android browser only, you could just add that to the other answers instead of being sarcastic.

2018年10月22日18分58秒

While I agree that it changes behaviour the user expects, it would make sense for things like the "Add Comment" button that is sitting next to this form field ...

2018年10月22日18分58秒

But doesn't that expose needless implementation details? An input or button's text can't be selected.

2018年10月22日18分58秒

anon: Most users will probably not try to select the text of your button, so in practice, it shouldn't really matter much. Besides, in order to do so, they will have to start selecting outside of the button—if they click inside the button itself, the onclick handler will activate instead. Plus, certain browsers (e.g. Safari) actually let you select the text of normal buttons…

2018年10月22日18分58秒

If you're selecting a set of comments from a chat thread and each comment has an upvote/downvote button next to it, then it would be nice to select the text without the other stuff. That's what the user expects or wants. He doesn't want to copy/paste the button labels with every comment.

2018年10月23日18分58秒

And what if you for example double click a button which instead of redirecting you to another page opens a div? then the text for the button will be selected due to the double-click!

2018年10月22日18分58秒

There are few things that can be known for sure, but this solution definitely doesn't work in all browsers.

2018年10月22日18分58秒

they why you say all browsers.. clearly you can edit better your answer

2018年10月23日18分58秒

scx the goal of the answer was to provide a starting point. as you can see, there are much better answers than mine anyway. if i have time to take another crack at it in the future, i'll experiment and see what i can come up with.

2018年10月22日18分58秒

I've had the same problem. On Mac Chrome 48.0.2564.116 and on Mac Safari 9.0.3. Notably, Mac Firefox 43.0 doesn't copy the character, but sticks extra endlines between them. What should be done about this?

1970年01月01日00分03秒

Make that color: inherit; maybe.

2018年10月22日18分58秒

yeah I love it. It's css selector level 3 according to Mozilla docs

2018年10月22日18分58秒

Deprecated as of version 1.9...

2018年10月22日18分58秒

This must be why Netbeans auto-completion has no idea what I am talking about!

2018年10月22日18分58秒