Disable text selection onclick button

Question

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.

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>

There is not selection in your code snipped. To you have the problem in all browsers? — onestarblack
– onestarblack, Commented Jul 22, 2016 at 12:26
I tested it with Opera, Chrome and Firefox. Only in Firefox appears this rectangle. (I used latest versions of all browsers) — d4rty
– d4rty, Commented Jul 22, 2016 at 12:29

user4994625 · Accepted Answer · 2016-07-22 12:32:28Z

1

For remove the dotted border in buttons in Firefox:

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

answered Jul 22, 2016 at 12:32

user4994625

Sign up to request clarification or add additional context in comments.

2 Comments

d4rty Over a year ago

This works. But why do I have to do this in firefox? Other browsers didn't add the dotted border on click

user4994625 Over a year ago

Is for accesibility reasons. From MDN: "Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using button::-moz-focus-inner { }" source

souki · Accepted Answer · 2016-07-22 12:26:07Z

0

Simply put this in your CSS :

.yourclass
{
outline:none;
}

Hope it helps.

answered Jul 22, 2016 at 12:26

souki

1,4354 gold badges26 silver badges44 bronze badges

Comments

Ismail Farooq · Accepted Answer · 2016-07-22 12:38:35Z

0

button.button:focus {
    outline: 0;
}

answered Jul 22, 2016 at 12:38

Ismail Farooq

6,9372 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

Disable text selection onclick button

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related