Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blue highlight on onclick on buttons in chrome mobile?

Tags:

html

css

When I click on a button in mobile chrome. A blue color appears for few a second. How do I remove it? I want to style something of my own like a ripple effect. I couldn't find any pseudo class attached to it in inspect tool.

enter image description here

*:focus {
      outline: none;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
}


div.filterButton{ 
      position: relative;
      padding-top: 10px;
      cursor: pointer;
      overflow: hidden;
}
like image 205
scripter Avatar asked Feb 28 '17 11:02

scripter


People also ask

How do I remove blue highlight on click?

Answer: Use the CSS ::selection pseudo-element By default, when you select some text in the browsers it is highlighted normally in blue color. But, you can disable this highlighting with the CSS ::selection pseudo-element.

What is Webkit tap highlight color?

-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.

How do you change highlight color in CSS?

To change the color of the highlighted-text, simply target the ::selection selector and then define the color of the background property.


1 Answers

It's -webkit-tap-highlight-color default behaviour.

*:focus {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
like image 168
scripter Avatar answered Sep 22 '22 09:09

scripter