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.
*:focus {
outline: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
div.filterButton{
position: relative;
padding-top: 10px;
cursor: pointer;
overflow: hidden;
}
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.
-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 change the color of the highlighted-text, simply target the ::selection selector and then define the color of the background property.
It's -webkit-tap-highlight-color
default behaviour.
*:focus {
-webkit-tap-highlight-color: transparent;
outline: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With