Проверенные стили кнопок не будут отображаться в Firefox

Question

Первый таймер здесь!

CSS, в соответствии со спецификациями клиента:

button {
  border: 1px solid #B8B7B8;
  border-radius: 8px;
  height: 4em;
  margin: 25px 2px 25px 0;
  text-align: center;
  text-decoration: none;
  width: 4em;
}

button:active,
button:checked,
button:focus,
button:hover {
  box-shadow: 0 0 0 1.5pt #068985;
  -moz-box-shadow: 0 0 0 1.5pt #068985;
  outline: none;
}

<button type="button">Button</button>

Фактические кнопки - просто старый HTML <buttons></button> s.
Отлично работает в других браузерах, но по какой-то причине Firefox поставил меня в тупик.

Кто-нибудь знает, как сохранить границу на нажатой кнопке?
Это работает для :hover, но это все.И да, я искал решение высокого и низкого уровня.

Большое спасибо!

Побочный квест - , если кто-нибудь знаеткак создать пробел между кнопкой и ее пользовательским контуром при выборе, тогда я напишу почетный блог на ваше имя!

Answer 1

Вы можете получить отмеченную функцию при нажатии, добавив класс к кнопке (div для пробела). Кроме того, вы можете увеличить расстояние между кнопкой и пользовательским контуром, добавив родительский div и установив границу родительского div.

Я создал jsfiddle здесь. https://jsfiddle.net/ajm5wnos/32/

var checked=false;

document.getElementById("myButton").addEventListener("click", (elem)=>{
  	event.target.parentNode.classList.remove("checked");
    checked= !checked;
	if(checked){
  	event.target.parentNode.classList.add("checked");
  }
})

button {
  border: 1px solid #B8B7B8;
  border-radius: 8px;
  height: 4em;
  text-align: center;
  text-decoration: none;
  width: 4em;
}

#buttonParent{
  padding:2px;
  display:inline-block;
  border-radius: 8px;
}

.checked{
  padding:2px;
  display:inline-block;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5pt #068985;
  -moz-box-shadow: 0 0 0 1.5pt #068985;
  outline: none;
}
#buttonParent:active,
#buttonParent:focus,
#buttonParent:hover {
  box-shadow: 0 0 0 1.5pt #068985;
  -moz-box-shadow: 0 0 0 1.5pt #068985;
  outline: none;
}

<div id="buttonParent">
  <button type="button" id="myButton">Button</button>
</div>

Спасибо.