在 Material Design 中，CheckBox 是一个非常常见的控件，用于用户选择。然而，由于 Material Design 中的设计风格非常统一，很多开发者可能会感觉 CheckBox 的样式略显单调。那么，如何给 CheckBox 自定义样式呢？本文将为大家介绍一种实现方式，帮助你打造更加美观的 CheckBox 控件。
实现思路
在 Material Design 中，CheckBox 通常由两个元素组成：checkbox 本身和一个文本标签。对于 checkbox 的样式，大家可能已经熟知，它包括默认状态（unchecked）、选中状态（checked）、半选中状态（indeterminate）三种状态。
那么，要实现自定义样式，我们需要做的就是针对这三种状态，使用 CSS 修改 checkbox 的默认样式。在实现之前，我们可以先了解一下 HTML 中 checkbox 的基本结构。
<label class="checkbox-container"> <input type="checkbox"> <span class="checkmark"></span> 文本标签 </label>
可以看到，整个 checkbox 控件包括一个 label 标签，其中有一个 input 元素和一个 span 元素，文本标签直接包含在 label 中。而文字标签不需要处理，我们主要关注的就是 input 和 span 元素的样式。接下来，我们将分别介绍三种状态下的样式实现方式。
默认状态
对于默认状态的 checkbox，我们只需要去掉默认的样式，并添加自定义的样式即可。
-- -------------------- ---- ------- -------------------- - --------- --------- -------- -- ------- -------- - ---------- - --------- --------- ---- -- ----- -- ------- ----- ------ ----- ----------------- ----- ------- --- ----- ----- - ------------------- - -------- ------------- --------- --------- ------------- ----- -------------- ----- ------- -------- ---------- ----- - ------------------- ------------- - ---------------- - -------- ------ - ------------------- ---------------- - -------- --- --------- --------- -------- ----- - ------------------- ------------- - ---------- - ----------------- -------- ------- ----- -展开代码
可以看到，我们使用了绝对定位的方式，将 checkbox 隐藏掉并放在了左上角。然后，我们将 span 元素的宽高设为 20px，设置背景色和边框，来模拟 checkbox，最后通过伪类实现选中状态下的勾。
选中状态
对于选中状态的 checkbox，我们只需要修改其样式即可。
.checkbox-container input:checked ~ .checkmark { background-color: #2196F3; border: none; }
这里，我们只需要将背景色和边框去掉，并设置一个深蓝色的背景即可。当 checkbox 被选中时，它的背景色将变为该深蓝色。
半选中状态
对于半选中状态的 checkbox，我们可以通过设置一张图片来模拟出半选中的效果。
.checkbox-container input.indeterminate ~ .checkmark { border: none; background-size: 20px 20px; background-position: center; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23424242' d='M19,13H5v-2h14V13z'/%3E%3C/svg%3E"); }
这里，我们通过指定查找 input 元素 class 名为 indeterminate 的元素（这个类名非常特殊，是 checkbox 本身带有的），然后将背景图片指向一张 SVG 文件，来实现半选中状态下的样式。
这里使用的 SVG 图片比较简单，只需要绘制一个矩形即可，颜色设置为灰色。如果想要更加复杂的图案，可以使用在线 SVG 编辑器来自动生成。比如 https://svg-edit.github.io/svgedit/。
应用实例
在实践中，我们可以通过这种方式来实现自定义的样式。下面给出一个完整的例子：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- -------- ------------ ------- -------------------- - --------- --------- -------- -- ------- -------- - ---------- - --------- --------- ---- -- ----- -- ------- ----- ------ ----- ----------------- ----- ------- --- ----- ----- - ------------------- - -------- ------------- --------- --------- ------------- ----- -------------- ----- ------- -------- ---------- ----- - ------------------- ------------- - ---------------- - -------- --- --------- --------- ---- ---- ----- ---- ---------- --------------- ------ ------ ---- ------- ----- ------- ----- ------ ------------- - --- --- -- ---------- -------------- -------- ------ - ------------------- ------------------- - ---------- - ------- ----- ---------------- ---- ----- -------------------- ------- ----------------- ------------------------------ ---------- - -- --- -------------------------------------------- ---------------- --------------------------------------- - ------------------- ------------- - ---------- - ----------------- -------- ------- ----- - -------- ------- ------ ------ --------------------------- ------ ---------------- ----- ------------------------- -------- - -------- ---- ------ --------------------------- ------ --------------- -------- ----- ------------------------- -------- - -------- ---- ------ --------------------------- ------ --------------- ---------------------- ----- ------------------------- -------- - -------- ------- -------展开代码
可以看到，我们通过 CSS 实现了三种状态下 checkbox 的自定义样式。当然，这只是一种方法，你也可以选择其它的实现方式，比如使用 SVG 图片来模拟 checkbox，或者使用 JavaScript 语言来动态生成 checkbox 的 HTML 和样式。总之，无论哪种方法，都需要注意可维护性和可复用性，以及与 Material Design 中的设计风格相适应。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cde571e46428fe9e7a7752
