Make anchor elements not highlightable-CodePudding

I am working on font adjustment bar (which contains buttons that increase/decrease font size). It works and all but it has one issue on cell phones. If the user spam taps those buttons on the browser the browser highlights the buttons and then the user can no longer use the buttons until he removes the highlighting (tapping away). This is an issue because many users do not know this and would think the bar does not work. I want to make my buttons not highlightable to allow for spamming. How do I do this? Note that I am not concerned with the highlighting color itself which I know can be hidden. I do not mind any solution let it be CSS or Javascript.

Thanks.

CodePudding user response：

Just use the css user-select: none; on your elements.

Of course, since browsers don't like complete standardization of CSS, you need to add some extra rules to get all the different browsers.

a {
  -webkit-user-select: none;
  user-select: none;
}

<a>i'm an anchor</a>

CodePudding user response：

First thing to try,

pointer-events:none

that might make the button unclickable though

the next thing to try is browser dependent

.button-link {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

found it on a youtube video last week so let me know.