Remove double outline on button and it's text inside

Question

I have a button with a text inside of it. I styled the outline on the :active and focus state like in the snippet bellow. I have a strange behaviour on firefox: When I tab into the button, there is an outline around the button and a second one around the text inside the button (see screenshot below). I just get this strange issue on firefox. How can I fix this. The only answer on my question that I found was, to use outline: none;, but this is not what I want. I want an outline just around the button.

outline on chrome Windows 10:

outline on firefox (issue) Windows 10:

.button__btn {
  background-color: transparent;
  border: 2px solid blue;
  font-size: 20px;
  padding: 8px 24px;
  text-align: center;
}

.button__btn:active,
.button__btn:focus {
  outline: 1px dotted black;
  outline-offset: 5px;
}

<div class="button">
  <button class="button__btn">I'm a default button</button>
</div>

Here's also a codepen: https://codepen.io/STWebtastic/pen/EORBpE

Łukasz Blaszyński · Accepted Answer · 2018-11-26T14:23:05.160

2

Please use following code:

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

It will remove firefox inner outline for all buttons.

this suggestion was also mentioned here: How to remove Firefox's dotted outline on BUTTONS as well as links?

edited Nov 26 '18 at 14:23

answered Nov 26 '18 at 14:09

Łukasz Blaszyński

1,536
1
8
13

Yes, I found the same link on the internet some hours ago. Thanks! – webta.st.ic Nov 26 '18 at 16:02
This seems to be also a bug of a specific firefox version: I'm on Windows 10 and my firefox is 63.0.3 (64-Bit). My collegue has the same issue on a Macbook with the same firefox version, while another collegue does not have this bug on a different version. – webta.st.ic Nov 27 '18 at 07:41

score 0 · Answer 2 · answered Nov 26 '18 at 13:17

0

Try this:

CSS

.button{
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer - Edge */
          user-select: none; /* Chrome and Opera */
}

The user-select property specifies whether the text of an element can be selected.

answered Nov 26 '18 at 13:17

javimovi

366
2
10

I tried it, but the issue is still there... I'm using Windows 10... A friend of mine tried it on Firefox Mac and he can not reproduce the issue, it looks the same as on chrome... – webta.st.ic Nov 26 '18 at 13:32

Remove double outline on button and it's text inside

2 Answers2