How to prevent users from selecting the button text, while playing a game for example? Read the whole description PLEASE 🙏.

Question

Let's say I have a dynamic shooting game. So there are controls like a D-pad and some action buttons like a fire button, which looks like this in my code <button>Fire</button>.

The problem is, when a player taps that button rapidly or long taps the button, the text gets highlighted. Things are even worse on phones, because of the text menu popping up.

YES, I know I could replace button tags with <input type="button" value="Fire" />, but I'd like to stick to button tags if possible.

Answer 1

Add:
button{
user-select:none;
}

Answer 2

If I understood correctly, you're asking to disallow selecting text.

user-select: none;

With vendor prefixes should work.

For more info and browser support: https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting

https://caniuse.com/#feat=user-select-none

https://css-tricks.com/almanac/properties/u/user-select/

Answer 3

Just add something to roneel's answer
user-select only work for chrome and Opera browser, here is the full:

user-select: none; /* supported by Chrome and Opera */

-webkit-user-select: none; /* Safari */

-khtml-user-select: none; /* Konqueror HTML */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */