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
Related
I have a web application that uses an HTML canvas that is made interactive through the use of JavaScript mouse and touch events. Recently, iOS Safari has begun putting the text highlight callout on the canvas if the user long-presses the canvas. Since the canvas is meant to be interacted with on iOS devices, this callout appearing is disruptive to the user experience.
The highlight is appearing on the canvas's fallback text (the contents of the canvas element) even though the browser does support canvas, so the text should not be present. The text is not visible, but copying from the callout adds the canvas fallback text to the clipboard, confirming that this is what the browser is selecting. Removing the text from the canvas element does not stop the callout from appearing, though; it just highlights and allows copying of an empty string.
The issue persists despite my use of these CSS properties on the canvas:
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
Demo of the issue: https://codepen.io/KingDragonhoff/pen/vYKoajK
Image of the callout appearing: https://imgur.com/a/dCm6uPC
How can I stop iOS Safari from showing the highlight callout on the canvas element?
Put canvas to div can solve you problem.
.container {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#canvas {
background-color: firebrick;
}
html {background-color: #3d4359;}
<div class='container'>
<canvas id="canvas" width="400" height="400">This is the canvas fallback text.</canvas>
</div>
Try to check this codepen on safari: https://codepen.io/taimanh229/pen/YzGYLwQ (Pass on iphone 7 ios 13)
You have to create a 'touchstart' event listener and call e.preventDefault() on it.
You must do this even if you are also using Pointer events instead of touch events. It is not enough to cancel those pointer events, even though they are of e.pointerType === 'touch'!
canvas.addEventListener('touchstart', function(e) { e.preventDefault(); });
The problem out here looks to be that the iOS device is assuming there can be something selectable on the page.
If the canvas is the only element that is supposed to be on the page, you can apply the styles to the html element directly.
In this case, adding your styles to the html selector should work for you.
html {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
Although, if there is anything else supposed to be on the page, you might have to live with that not being selectable as well.
According to MDN the -moz-user-select-property on an element will be set on all sub-elements as well. It also states the user-selection can be re-enabled on sub-elements using -moz-user-select:text.
I can not get this to work on my input-elements in firefox, but it works in Chrome. Any idea on how to fix this?
Example: http://jsfiddle.net/NBNpF/3/ (Try to put focus in the input-box, it only works in Chrome, not Firefox). I am using FireFox 18.0.2
I found the solution I think, the key was to replace -moz-user-select: none; with -moz-user-select: -moz-none; instead.
so Your CSS must be like :
.unselectable {
-moz-user-select: -moz-none;
-webkit-user-select: none;
}
I updated your jsfiddle : http://jsfiddle.net/NBNpF/7/
I Hope this help.
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 can't believe I'm asking this but, is there any way to get Chrome to function like IE when highlighting content? When simply dragging from left to right across multiple elements, Chrome seems to like highlighting partial or entire elements rather than text-only, like IE does.
Here's an example: http://jsfiddle.net/cpMtK/
Chrome highlighting:
IE highlighting:
I've tried using:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
as suggested in an SO answer here, which just disabled all highlighting. Then I looked into user-select and found that it has a text option, rather than none. So, I applied that but it had the same effect as none.
I've also tried applying the none settings to * and selectively applying text to certain generic text tags, such as span, p, h1, etc, but it still behaved the same way.
Is there an available CSS rule or is this just the way that Chrome works?
Update
I need the content to be offset with padding as I make extensive use of :hover, which vastly increases the hit-area of the element whereas margin doesn't.
Use a child element if you realy want to keep the padding.
Demo:
http://jsfiddle.net/cpMtK/2/
Use margins on div.box instead of vertical padding.
.box {
margin:20px 0;
width: 100px;
padding: 0 40px;
}
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.