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>。
在其他浏览器上可以正常工作，但是由于某些原因，Firefox让我感到困惑。

有人知道如何将边框保持在单击的按钮上吗？
它适用于:hover，仅此而已。是的，我一直在寻找解决方案。

非常感谢！

辅助任务 --如果有人知道如何在选择按钮及其自定义轮廓之间创建空格，那么我将以您的名义写一个荣誉博客！

Answer 1

您可以通过在按钮上添加class（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>

谢谢。

选中的按钮样式不会在Firefox中显示

1 个答案: