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
Related
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'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
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- !!
I'm pretty new to Phonegap. I have a problem where the default css used in a clean Phonegap project won't allow input into text fields. I narrowed it down to one line of CSS:
* {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
The problem line is:
-webkit-user-select: none;
This can be found in www/index.css.
Seems like completely disabling the input field isn't the desired effect.
I've also posted this problem 2 times before but it was closed, not sure why... My issue was closed due to not being a common problem. Well, all I can say about that is, I guess some users at stackoverflow don't think CSS 3, Phonegap, HTML 5, and -webkit-user-select: is a common situation. I'd beg to differ.
However I can see this issue also posted here, also causing problems in Safari: User select:none causes input field to be inaccessible on Safari Although slightly different.
My current solution is this:
-webkit-user-select: text; /* change 'none' to 'text' */
Just still curious as to what is the most elegant solution to enable the text input, but still maintain some of this copy and past functionality that Phonegap is trying to achieve. Thanks!
Try adding this to your css:
input {
-webkit-user-select: auto !important;
}
This will override the text selection disabling that you have set on every single element (via the * selector) for input fields.
Just add rules to css in this way:
*:not(input,textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
user-select can cause issues in elements with contenteditable="true" so better to add that too
[contenteditable="true"] , input, textarea {
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
-o-user-select: auto !important;
user-select: auto !important;
}
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?