Text highlighting is not working for all input fields in my asp.net web app with the latest versions of FireFox and Google Chrome (CTRL+A does not work either). I have not been able to test older versions yet. With Edge it is working properly.
Details: Double-clicking text or moving the mouse over the text while holding the left mouse button does not highlight the text. Surprisingly, dragging and copy/paste does work. So the text is actually selected but not highlighted.
I searched through my CSS for disable-select but could not find a single occurrence.
Any suggestions where else to look for a cause?
The property that you need to search for is not disable-select, it's user-select. For example
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
The other property that you can look for is: ::selection for Chrome and ::-moz-selection for Firefox.
Also, you can change the default selection color just for the test:
::selection {
background: #FF0000;
}
::-moz-selection {
background: #FF0000;
}
What I found out:
No occurrence of user-select: none in my CSS. But in Style.css I found:
::selection {
text-shadow: none;
}
Which I changed to:
::selection {
text-shadow: none;
background: #f7ea54;
/*or any other color*/
}
Now highlighting is working with all browsers! Why it does not work with the default setting, I could not figure out.
This will happen eventually with gamer mouse or when using in gaming. Enabling autofire or other similar mouse function alteration will lead to this kind of behavior.
There are few things you can to do to try turn off these:
– examine you mouse for such function buttons
– analyze mouse user manual for mouse function enhancements when pressing certain button combinations
– install manufacturer mouse application if available
– use the same game when you set these, to reverse them
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.
I have a jcarousel and double clicking next button results in the images being highlighted in blue, on Chrome only.
::selection { background: white;}
::-moz-selection {background: white;}
This fixes it but means one cannot select (or rather see you are selecting) text on any other parts of the site.
My jcarousel is within:
<ul id='product-id-232-carousel' class='product-carousel jcarousel-skin-tango'>
So I tried several variations of :
ul.product-carousel::selection { background: white;}
ul.product-carousel::-moz-selection {background: white;}
To try to restrict the white selection b/g to just the jcarousel but none work.
Thanks,
Kevin
Found a solution:
Wrapped carousel in a div and applied this style:
.carouselnoselect{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
This has nothing to do with ::selection and everything to do with your carousel plugin not preventing the default action of events properly.
Somewhere in jcarousel you should find a click handler for scrolling to next or previous items. It should have e.preventDefault() or similar in there, but from what you're saying I would guess it doesn't.
I am using CSS to style the label of a checkbox as I have seen many times on the web. The problem is that Firefox behaves strange when it comes to clicking on the label.
If one clicks on the label while holding down the button and moves (even slightly) to the side while still staying on the label, then the checkbox doesn’t get selected. In all other browsers I tested (Chrome, Safari, IE) this works just fine. This behavior of Firefox is annoying, since it leads to the checkbox sometimes not being selected as expected, due to a minor movement of the mouse or so while selecting.
Is the fault on my side or on the Firefox side? (Or is there even a good reason behind this behavior in Firefox? I doubt it.)
Here is the HTML:
<style>
.mycheckbox:checked + label {
background: red;
}
.mycheckbox-label {
border: 1px solid black;
padding: 20px;
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<input type="checkbox" id="field1" class="mycheckbox" />
<label for="field1" class="mycheckbox-label">Click!Click!Click!</label>
P.S. I just realized another strange behavior: WebKit browsers (i.e. Chrome and Safari) show the right behavior only if you do not move with the pressed-button mouse from padding onto the text of the label or vice versa. So it only works as long as you stay on the padding or as you stay on the text. So, IE is the only browser (of those tested) that really gets the behavior right… even more strange…
P.S. 2. Another strange behavior in WebKit browsers is that they change the mouse pointer while dragging even though I have the *-user-select: none and cursor: pointer set.
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
I listen for click events inside an html5 canvas and it works just fine. However, when I click anywhere on the image the browser highlights it as if it were selected (similar to how an image might look highlighted if clicked on a page). I was curious if anyone knew how to disable selecting of html elements such as canvas. I don't want the canvas to appear outlined when someone clicks it.
Going on bebraw, go wild with CSS styles and add this in the head:
<style type="text/css">
canvas {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}
</style>
You could try applying a few CSS rules along these:
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
As Michael mentioned jQuery's disableTextSelect is worth checking out. Even if you don't end up using it, studying the source might give some insight.
Only the last of those css rules seemed to do it. The other rules together didn't work (on Safari iOS5) until I added the last one.
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
I'd use jQuery.$('.noSelect').disableTextSelect();
Somewhat related: if the problem is that the cursor becomes the selection icon (eg. when dragging on the canvas), you can disable that by either this CSS on the canvas:
cursor: default;
or preventing the event's default behavior in the mousedown handler:
event.preventDefault();