Firefox不显示复选框的样式

Question

这就是Chrome / Opera上的复选框：

但是在Firefox上似乎没有应用任何样式：

是否可以使用CSS和Bootstrap4为复选框和选定字段设置样式，以便在Firefox上对Chrome / Opera产生相同的效果？

Mozilla MDN显示::selected伪类，但它仍然不起作用。

.checkbox {
  position: relative;
  margin: 0 1rem 0 0;
  cursor: pointer;
}
.checkbox:before {
  transition: all 0.3s ease-in-out;
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  border: 2px solid #e2e2e2;
  border-radius: 2px;
}
.checkbox:checked:before {
  transform: rotate(-45deg);
  height: .5rem;
  border-color: #ff243d;
  border-top-style: none;
  border-right-style: none;
}
.checkbox:after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  background: #fff;
  cursor: pointer;
}

<input type="checkbox" class="checkbox" unchecked>Checkbox_1

CodePen

Answer 1

我不确定为什么这会给您带来问题，但我看到的所有CSS复选框样式都在实际复选框上使用opacity: 0;，并在::before上应用样式和::after旁边的<label>;

我遵循了这个指南：https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3

并将其与你想要的效果混合在一起，这就是结果：

.checkbox { display: inline-block; line-height: 1rem; }
#checkbox_1 { visibility: hidden; position: relative; }
#checkbox_1 + label { cursor: pointer; }
#checkbox_1 + label::before {
  transition: all 0.3s ease-in-out;
  content: "";
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1rem;
  border: 2px solid #e2e2e2;
  border-radius: 2px;
}
#checkbox_1:checked + label::before {
  transform: rotate(-45deg);
  height: .5rem;
  border-color: #ff243d;
  border-top-style: none;
  border-right-style: none;
}
#checkbox_1 + label::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1rem;
}

<div class="checkbox">
  <input type="checkbox" id="checkbox_1" unchecked>
  <label for="checkbox_1">Checkbox_1</label>
</div>

CodePen上的完整代码：https://codepen.io/AquatuzMagnus/pen/rGONbP