d4rty d4rty - 4 months ago 9
HTML Question

Disable text selection onclick button

How can I avoid that there is a dotted selection rectangle around the text when the user clicks the button, see image below. I already tried to add the css rule

user-select: none;
, which I saw in another question, but this doesn't seem to work.

rectangle around the text when the user clicks the button

Any suggestions?

EDIT: The issue only appears in Firefox (tested with version 47.0)



.button {
background-color: #1a1a1a;
border: none;
color: #f8f8f8;
padding: 10px 40px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 4px;
user-select: none;
-webkit-transition-duration: 0.3s;/* Safari */
transition-duration: 0.3s;
}
.button:hover {
background-color: #595959;
/* Green */
color: white;
}

<button class="button">Button</button>




Answer

For remove the dotted border in buttons in Firefox:

button::-moz-focus-inner {
  border: 0;
}