I'm currently using:
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Go to http://jsfiddle.net/KyF5x/ and click below the list, see that this highlights the text... which can't be un-highlighted. Reload the page, now try ctrl+a, see that this will also highlight the text.
The above doesn't occur in Chrome, Safari or IE 10.
Disclaimer: I'm using Firefox 18
As a temporary answer, the fix is the apply the CSS to the individual 'unselectable' elements. However i'd love to see someone come up with a document-wide fix.
li{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See: http://jsfiddle.net/KyF5x/1/
A use case for having document-wide unselectable text is more obvious in the domain of web apps, rather than typical websites.
As a complement to Jack's answer - even in 2018, firefox does not support user-select, but does support moz-user-select. I chose a cut down version of what the fiddle in the accepted answer does:
/* stop the user selecting page structure with the mouse */
html, body, div, a, i, button, select, option, optgroup, hr, br {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
This is for a web app where we don't use any other elements, all page structures are divs, even titles etc, and we didn't want to disallow selection in input or textarea.
This was the only place in our entire web 500k lines of code app where we've had to use -moz- !!
Related
I am trying to make some text readonly using in-line CSS. Both these methods work fine when testing using a standard html page.
Firefox syntax:
<div style="-moz-user-select: none;">Some text</div>
Chrome Syntax:
<div style="-webkit-user-select: none;">Some text</div>
However, I am trying to use this syntax in a text editor used within a CMS product. It works fine for firefox but not Chrome. I have also tried using the most basic approach which also does not work:
<div style="user-select: none;">Some text</div>
My question is, is there any other way of using in-line CSS (or HTML) to disable a block of text. Because we are using a free text editor we cant use any HTML input types.
One could combine all three inline css as following:
<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Some text</div>
This way it should work for all browsers you've mentioned.
One could wrap this css into one class which is suggested in the linked post
As explanation which is quoted from How to disable text selection highlighting using CSS?:
-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; / Chrome/Safari/Opera /
-khtml-user-select: none; / Konqueror /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge /
user-select: none; / Non-prefixed version, currently
not supported by any browser */
One could also use some javascript properties to prevent selection:
<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">Some text</div>
I'm writing a little application with Apache-Cordova. I have two divs lookings like this (and the little yellow one):
As far everything is fine, but when I start adding click/mouse Eventhandlers to my green divs, they get blueish marked as far as I touch them (and the click doesn't trigger, when I am holding them too long).
<p id="GreenDiv" onclick="GreenDiv_OnClick()">
I've tried these in CSS so far, but this won't work:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Does anybody know how to turn that marking off?
The answer is this part of css I've found after much more googling:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
I'm learning HTML/CSS right now, so I did this little cookie-clicker lookalike for fun : http://jsfiddle.net/Zerh/6kb87sp9/
My problem is : if I click too fast on any button (double click) it highlights a selection.
I used the following CSS for hiding the highlight :
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
It seems to work on Firefox/Edge but I can't get it to work on Chrome.
I found this old topic : How to disable text selection highlighting using CSS?, but it's 6 years old and doesn't seem to work for me.
I think this will disable on any element
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I think this will solve your problem you just need to add the class "noselect" to the element you want
I've got an input element inside a label element (don't want to use id):
<label class="inline-block-class">
<input type="radio/checkbox" class="hidden-class" />
<span><img src="mimic-input-element.png" /> some text</span>
</label>
It all works well, but when I'm clicking the label twice in a row, trying toggling the input on and off, it works only for the first click. The second one is just 'selecting' the elements on screen.
How can I prevent this behaviour? I want to give the label a native feel, like clicking on the real thing.
Here's a fiddle that demonstrates the issue: http://jsfiddle.net/soLuwwy3/
few lines of css will do this for you:
label span {
background: yellow;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
your jsfiddle edited:
http://jsfiddle.net/soLuwwy3/5/
To make your span text not selectable use user-select: none.
more info user-select
label span {
background: yellow;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
DEMO
http://jsfiddle.net/QKJfW/
I want the cursor to remain the cursor:move; cursor even when clicking and dragging on the page. As you can see now you get an i-bar like you are trying to select text.
In my real app it is actually a custom cursor.
Is that a possibility?
Put these styles on the thing you want to be non selectable:
http://jsfiddle.net/QKJfW/1/
-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;
That should take care of your issue.
See: How to disable text selection highlighting using CSS?