CODEWITHSUNDEEP
htmlcss
d4rty
d4rty

Reputation: 4188

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>

Upvotes: 0

Views: 492

Answers (3)

Ismail Farooq
Ismail Farooq

Reputation: 6837

button.button:focus {
    outline: 0;
}

Upvotes: 0

user4994625
user4994625

Reputation:

For remove the dotted border in buttons in Firefox:

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

Upvotes: 1

souki
souki

Reputation: 1385

Simply put this in your CSS :

.yourclass
{
outline:none;
}

Hope it helps.

Upvotes: 0

Related Questions