I've got a bit of an odd one here, I'm trying to stop users from being able to highlight text within a text input but the standard code below isn't working.
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
jsfiddle illustrating the issue - https://jsfiddle.net/z0L4cj3n/7/
When checking the css within the browser, "user-select: none;" is active but isn't making any difference, is there something else in my css overwriting this behaviour? I've even tried adding the above code to the specific input to no result.
Edit: adding
pointer-events: none;
is not an option as I have hover effects and jQuery events being triggered by the inputs.
Try Using
pointer-events: none;
in Css
http://jsfiddle.net/gBG65/4/
In emulation of my actual project, here we have a text input within a div. The div and everything else in it must be unselectable, hence its CSS. But the form ought not to be that way, hence its CSS, yet it is anyway. Even though if I inspect the element, it inherited everything correctly and ought to be working, it is still unselectable.
This is Firefox only.
Any explanations or fixes?
div * {
-moz-user-select: -moz-none;
cursor:default;
}
input {
cursor: auto;
-moz-user-select: -moz-user-select:text;
}
If you read the docs
You can see it is -moz-none;
And to re-enable use: -moz-user-select: text;
Also remove the *...
Example
Take a look at this Fiddle.
That's part of my login-page with the entire site stylesheet. This login form works brilliantly in Chrome, but in FireFox it, for some reason, freezes the username input after I've started writing the password, and when you remove focus from the password box, that's frozen too.
Does this happen with you? If yes, any idea why?
After Boris' answer my user-select stylus function now works perfectly and looks like this:
user-select()
user-select arguments
-webkit-user-select arguments
-o-user-select arguments
if arguments == 'none'
-moz-user-select -moz-none
else
-moz-user-select arguments
Which on usage renders to this:
user-select none:
user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: -moz-none;
user-select text:
user-select: text;
-webkit-user-select: text;
-o-user-select: text;
-moz-user-select: text;
-moz-user-select: none means nothing inside it is selectable, period. It doesn't matter what the styles of the things inside it are.
If you want to be able to override by styling descendants, you want -moz-user-select: -moz-none.
I am currently exploring web apps for iOS devices and use PhoneGap to create a "native" application out of it. The problem I have with this is the magnifying glass, that I don't want to be shown when selecting paragraphs (or bit of text). I have tried a lot of solutions but nether works. I use this CSS to disable all copy, selection and such for those fields I wan't:
*[untouchable] {
-webkit-user-drag: none;
-webkit-user-modify: none;
-webkit-highlight: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
This works fine, but it still shows the magnifer/loupe when I touch and hold on text:
Is there a real solution to this? It would be awesome with a simple CSS property such like -webkit-magnifier: none or something like that. If there's a JavaScript solution, that would be fine too, but maybe a overkill.
Since I am using PhoneGap and it uses UIWebView to show the page, there might be a way of disabling the magnifier for that - but I haven't looked that much into the native source.
Thanks in advance :-)
The only way to accomplish this is to rid elements completely of selection since the magnifier is incorporated. -webkit-user-select:none; should be applied to all elements where you don't want the magnifier to appear.
This is what I used
* {
-webkit-touch-callout: none;
-webkit-user-callout: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-user-modify: none;
-webkit-highlight: none;
}
Here is an interesting CSS questions for you!
I have a textarea with a transparent background overlaying some TEXT that I'd like to use as a sort of watermark. The text is large and takes up a majority of the textarea. It looks nice, the problem is when the user clicks in the textarea it sometimes selects the watermark text instead. I want the watermark text to never be selectable. I was expecting if something was lower in the z-index it would not be selectable but browsers don't seem to care about z-index layers when selecting items. Is there a trick or way to make it so this DIV is never selectable?
I wrote a simple jQuery extension to disable selection some time back: Disabling Selection in jQuery. You can invoke it through $('.button').disableSelection();
Alternately, using CSS (cross-browser):
.button {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
The following CSS code works almost modern browser:
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
For IE, you must use JS or insert attribute in html tag.
<div id="foo" unselectable="on" class="unselectable">...</div>
Just updating aleemb's original, much-upvoted answer with a couple of additions to the css.
We've been using the following combo:
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
We got the suggestion for adding the webkit-touch entry from:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html
2015 Apr: Just updating my own answer with a variation that may come in handy. If you need to make the DIV selectable/unselectable on the fly and are willing to use Modernizr, the following works neatly in javascript:
var userSelectProp = Modernizr.prefixed('userSelect');
var specialDiv = document.querySelector('#specialDiv');
specialDiv.style[userSelectProp] = 'none';
As Johannes has already suggested, a background-image is probally the best way to achieve this in CSS alone.
A JavaScript solution would also have to affect "dragstart" to be effective across all popular browsers.
JavaScript:
<div onselectstart="return false;" ondragstart="return false;">your text</div>
jQuery:
var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
Rich
You can use pointer-events: none; in your CSS
div {
pointer-events: none;
}
Wouldn't a simple background image for the textarea suffice?
you can try this:
<div onselectstart="return false">your text</div>
WebKit browsers (ie Google Chrome and Safari) have a CSS solution similar to Mozilla's -moz-user-select:none
.no-select{
-webkit-user-select: none;
cursor:not-allowed; /*makes it even more obvious*/
}
Also in IOS if you want to get rid of gray semi-transparent overlays appearing ontouch, add css:
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
Yes, there are multiple ways.
You could simply add the user-select CSS declaration and set it to none, like this
div {
user-select: none;
}
Also you could accomplish this with the CSS ::selection selector and set the selection background color to match your own. This could get tricky.:
p::selection {
background: rgba(0, 0, 0, 0)
}
Option 1 being the best option in most cases for obvious reasons!
Use
onselectstart="return false"
it prevents copying your content.
Make sure that you set position explicitly as absolute or relative for z-index to work for selection. I had a similar issue and this solved it for me.