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.
Related
On my website, when I click on a link that has a href or onclick reference, it gets a blue highlight that ends my design. How to remove? See an example in the menu icon that has an 'onclick' reference, I managed to take a print right from the time I click on it on my phone.
How can I remove this?
The icon is blue that I did not program, all links on the site look like this
If a media screen solution suit you. That can work:
#media screen and (max-width:500px) {
.selector:active, .selector:hover {
background-color: unset;
color: #999;
}
}
Given that we're working with an "a" element you can easily get rid of the blue highlighting with basic css:
a:hover, a:focus, a:active {
text-decoration: none;
color: #3c4146 /* Just a mild gray, you can change this to whatever you want */
}
In the case of a different element, which in your case looks like a btn/div with a set background, you can adapt the css to it.
You can set the bg back to its original color when you either hover, focus or set the element to active.
.element:focus, .element:active, .element:hover {
background-color: #000000; /* Use the original element background-color here */
}
a {
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
}
I was testing my new pet project on my phone and I also had an issue with BLUE outline/highlight flashing effect upon TAP.
For me #RedhaBenKortbi answer worked.
After applying this CSS to tags, the links were no longer flashing with the blue-ish outline/highlight when you click.
.scaledImage a {
-webkit-tap-highlight-color: transparent !important;
}
Doc says:
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being
tapped. The highlighting indicates to the user that their tap is being
successfully recognized, and indicates which element they're tapping
on.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
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
This is specifically with the selectBoxIt jQuery plug-in, using the jQueryUI theme.
I have this set up for the hover action:
/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
That works fine. When I hover my mouse over the options, I get a red background with white text.
However, when I do this...
.selectboxit-option:focus .selectboxit-option-anchor:focus {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
...nothing changes.
I see that all the demos on selectBoxIt's main web page DO have changing background colors with keyboard focus...so what am I missing?
Technically, each option doesn't use the focus event, which is why the focus pseudo selector is not working for you. For the jQueryUI theme, the "active" option adds the ui-state-focus class, so to change the "focus" CSS style, you could have a rule like this:
.selectboxit-option.ui-state-focus {
background: #CCC;
}
I am using on my Android app a webview which loades an external page.
It has a few anchors (<a> tags). When I press on it, yellow border appears.
How can I prevent it and remove this border ?
I've tried following tricks:
// jQuery
$("a").focus(function(){
$(this).attr("hideFocus", "hideFocus");
});
// CSS
a, :focus {
outline: none;
}
but with no success.
Thanks !
Set the CSS property -webkit-tap-highlight-color as follows:
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
Note: setting the color in other ways usually fails because of the way webkit renders the highlight. Depends on version/variant according to my experience.
according to this post it's better to use
a:focus,
button:focus,
input:focus,
textarea:focus {
outline: none;
}
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();