为原生复选框和单选框输入设置样式（仅限 CSS）

那么，你想在不依赖 JavaScript、插件或数十个包装器的情况下，为原生的单选按钮和复选框添加样式吗？嗯，完全可以 :)

所有这些魔法的提供者是appearancecss 属性。它appearance用于向 Web 元素应用或移除系统原生样式。

以下链接可了解更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance。

但是，如果您查看“我可以使用吗”部分，您可能会注意到，此属性仅在将其值设置为“none”时才得到良好支持，而这正是我们所需要的。这是因为不同的 apperance 值可能会根据您的系统和浏览器引擎显示不同的结果，但所有浏览器都支持该属性appearance:none，因为它没有隐藏属性，只是移除了元素的原生样式。因此，就此而言，我们提供了良好的支持。

https://caniuse.com/#search=appearance

还有一点值得一提：外观仅与元素样式相关。这意味着，如果我将其设置appearance: none为复选框，该元素仍然是复选框，但没有任何外观（系统样式）。反之亦然，appearance: button例如，将一个元素设置为 ，它不会将该元素变成按钮，而只会保留按钮的外观。

这就是我们必须使用此属性的方式。

.element {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

编码

现在开始写代码。思路很简单，移除复选框和单选按钮的原生样式，并应用我们自己的样式。如果浏览器不支持appearance选择器，也没什么问题，系统会使用原生的复选框和单选按钮。结果如下：

首先让我们删除复选框和单选按钮的外观

[type=radio],
[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

现在我们将应用外观。您可以将上述属性和此属性组合在一个选择器中，但为了方便阅读，我们先拆分一下：

[type=radio],
[type=checkbox] {
  width: 20px;
  height: 20px;
  border: solid 1px #cccccc;
  margin-right: 8px;
  position: relative;
}

现在让我们来谈谈我们希望元素在被检查时是什么样子。记住：我们移除的是外观，而不是行为。这里的想法是，当元素被检查时，我们将使用 ::before（伪元素）来填充空白处。这就是为什么我们的元素被设置为position: relative，因为 ::before 会绝对放置在元素内部，从而呈现出“已检查”的外观。

[type=radio]:checked::before,
[type=checkbox]:checked::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #ffa500;
  position: absolute;
  top: 2px;
  left: 2px;
}

最后，让我们将单选按钮的角弄圆，以区别于复选框：

[type=radio],
[type=radio]:checked::before{
  border-radius: 100%;
}

好了，各位。现在我们有了样式化的复选框和单选框了🎉

封面图片由 Nadine Shaabana 在 Unsplash 上提供。