html - How to get rid of box when clicking/tapping on mobile devices?

Question

I'm trying to get rid of a box that appears only on mobile devices when a user taps/holds a link(button). I've noticed when I set the active state color to the color I want the font to be it appears to set the background color as well.

a:active{outline: none; color: #fff;}

Here is how the links look like before and after they are clicked on mobile (looks fine on desktop).

Button before it is clicked Button after it is tapped/held

question from:https://stackoverflow.com/questions/65927174/how-to-get-rid-of-box-when-clicking-tapping-on-mobile-devices

Answer 1

Sounds to me like you want to remove the color property for mobile only. To achive that you can use @media only screen and (max-width: 600px) property in css which will load the css for all devices that have max-width of 600px. Here you can find more info on that https://www.w3schools.com/cssref/css3_pr_mediaquery.asp