Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly

Question

Most of the time I m not worried about it but I have an image carousel and if I click on the next and previous divs quickly  they will be highlighted in Chrome   I tried using outline none but no effect  Are there any solutions out there

User · Answer

For Chrome on Android  you can use the -webkit-tap-highlight-color CSS property      -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    To remove the highlighting completely  you can set the value to transparent   -webkit-tap-highlight-color  transparent    Be aware that this might have consequences on accessibility  see outlinenone com

User · Answer

This works the best for me    noSelect hover     background-color  white

User · Answer

But  sometimes  even with user-select and touch-callout turned off  cursor  pointer  may cause this effect  so  just set cursor  default  and it ll work

User · Answer

To remove the blue overlay on mobiles  you can use one of the following  -webkit-tap-highlight-color  transparent     transparent with keyword    -webkit-tap-highlight-color  rgba 0 0 0 0      transparent with rgba    -webkit-tap-highlight-color  hsla 0 0 0 0      transparent with hsla    -webkit-tap-highlight-color   00000000     transparent with hex with alpha    -webkit-tap-highlight-color   0000     transparent with short hex with alpha     However  unlike other properties  you can t use -webkit-tap-highlight-color  none     none keyword     In DevTools  this will show up as an  invalid property value  or something   To remove the blue black orange outline when focused  use this   focus       outline  none     no outline - for most browsers        box-shadow  none     no box shadow - for some browsers or if you are using Bootstrap       The reason why I removed the box-shadow is because Bootsrap  and some browsers  sometimes add it to focused elements  so you can remove it using this  But if anyone is navigating with a keyboard  they will get very confused indeed  because they rely on this outline to navigate  So you can replace it instead  focus       outline  100px dotted  f0f     100px dotted pink outline        You can target taps on mobile using  hover or  active  so you could use those to help  possibly  Or it could get confusing   Full code  element       -webkit-tap-highlight-color  transparent     remove tap highlight      element focus       outline  none     remove outline        box-shadow  none     remove box shadow        Other information   If you would like to customise the -webkit-tap-highlight-color then you should set it to a semi-transparent color so the element underneath doesn t get hidden when tapped Please don t remove the outline from focused elements  or add some more styles for them  -webkit-tap-highlight-color has not got great browser support and is not standard  You can still use it  but watch out

User · Answer

In addition to the link provided by Floremin  which clears text selection using JavaScript to  clear  the selection  you can also use pure CSS to accomplish this  The CSS is here      noSelect       -webkit-touch-callout  none      -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  none      -ms-user-select  none      user-select  none      Simply add the class  noSelect  attribute to the element you wish to apply this class to  I would highly recommend giving this CSS solution a try  Nothing wrong with using the JavaScript  I just believe this could potentially be easier  and clean things up a little bit in your code   For chrome on android -webkit-tap-highlight-color  transparent  is an additional rule you may want to experiment with for support in Android

User · Answer

I had similar issue with  lt input type  quot range quot    gt  and I solved it with  -webkit-tap-highlight-color  transparent    x000D   x000D  input type  range      -webkit-tap-highlight-color  transparent    x000D    lt input type  range  id  volume  name  demo           min  0  max  11  gt     lt label for  volume  gt Demo lt  label gt  x000D   x000D   x000D

User · Answer

Try creating a handler for select event on those elements and in the handler you can clear the selection   Take a look at this   Clear Text Selection with JavaScript  It s an example of clearing the selection  You d only need to modify it to work only on the specific element that you need

User · Answer

I m running Chrome version 60 and none of the previous CSS answers worked   I found that Chrome was adding the blue highlight via the outline style   Adding the following CSS fixed it for me    focus       outline  none  important

[css] Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?

Examples related to css

Examples related to google-chrome