Search code examples
htmlcsswindowsfirefoxoutline

Remove double outline on button and it's text inside

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:

enter image description here

outline on firefox (issue) Windows 10:

enter image description here

.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

Solution

  • 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?