html - 复选框背景颜色和样式

Question

我读到过，由于浏览器设置不同，所以没有任何好的方法来设置复选框的样式。我知道您应该能够通过将每个复选框包装到 Div 中来更改背景颜色，但是边框和 arraow 怎么样？

但也许有人有任何提示可以像这样设计它们:

目前我在 Firefox 中有默认设置:

Answer 1

使用蒙版叠加

label {
  display: block;
  border: 4px solid #88a;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) inset;
  border-radius: 10%;
  width: 1em;
  height: 1em;
}
input {
  display: none;
}
input:checked + label {
  background-color: rgba(0, 255, 0, .8);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, .1) inset;
}

<input type="checkbox" id="chk">
<label for="chk"></label>