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
I'm making a cordova app but today I stumbled on a weird problem. Whenever I close the datepicker (http://materializecss.com/forms.html#date-picker) there is a yellow line at the edge of the webview. (I scrolled a bit down to make it more clear in the picture) screenshot
I initially thought it was because of some highlight feature on touch devices because when I test my app on a browser (chrome), the border isnt there.
In the css I've disabled highlight like this (though it didn't work):
*{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
adding outline:none; in the css did the job.
I'm making a custom stylesheet to add to doxygen output files which is aimed at making website elements not selectable, so that only the useful code/text is selectable. Below is an example of a CSS rule to remove line numbers. Although it seems to select the correct classes, using select-all or dragging with a mouse and then copy/pasting into a text editor still copies over the line numbers. Why does this happen? Furthermore, how do I prevent it?
http://jsfiddle.net/b5cU2/1/
<div class="fragment"><div class="line"><a name="l00099"></a><span class="lineno"> 99</span> {</div>
<div class="line"><a name="l00100"></a><span class="lineno"> 100</span> <a class="code" href="class_talon.html#a139bb330021efa545fd6047fa291dbeb">Set</a>(output);</div>
<div class="line"><a name="l00101"></a><span class="lineno"> 101</span> }</div>
<div class="ttc" id="class_talon_html_a139bb330021efa545fd6047fa291dbeb"><div class="ttname">Talon::Set</div><div class="ttdeci">virtual void Set(float value, uint8_t syncGroup=0)</div><div class="ttdef"><b>Definition:</b> Talon.cpp:70</div></div>
</div>
<style>
.lineno {
background-color: red !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line:not(.lineno) {
background-color: blue;
-webkit-touch-callout: text !important;
-webkit-user-select: text !important;
-khtml-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
</style>
It's about how browsers interpret it. Firefox does what you want and matching selector cannot be copied. WebKit allows the text to be copied if you select elements around it.
You could always use another structure. Like this
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.