迹忆客 专注技术分享

本篇文章将介绍一种在 CSS 中设置复选框样式的方法。

使用 CSS 设置复选框样式

复选框是一个 HTML 元素，用于接受用户的输入，几乎在所有网站中都使用。既然浏览器提供的默认复选框在所有其他站点上看起来都一样，为什么不设置它们的样式呢？尽管使用 :before、:after、:hover 和 :checked 等伪元素设置它们的样式有点复杂，但可以使用 CSS 设置复选框的样式。

要将样式应用到复选框，我们将仅使用 HTML 和 CSS，没有其他库。这种方法在现代浏览器中运行良好。在样式化复选框方面可以有很多方法。我们可以遵循这些简单的原则来实现我们的目标。我们可以隐藏默认的复选框控件，该控件由浏览器设置样式，无法使用 CSS 以任何有意义的方式覆盖。隐藏控件后，我们仍然需要检测并切换其选中状态。我们可以通过为新元素设置样式来反映复选框的选中状态。

上述原则可以使用不同的方法来应用，并且没有单一的正确或错误方法。在本教程中，我们将首先将复选框包装在 div 元素中。这意味着即使复选框控件被隐藏，我们仍然可以通过单击 div 内的任意位置来切换其选中状态。然后，我们可以隐藏复选框并在复选框后添加一个新元素，我们可以相应地设置样式。该元素必须出现在复选框之后才能根据 :checked 状态进行选择和设置样式。CSS 中的伪类用于设置特定元素的样式，定义元素的特定状态。这里我们使用了一些伪元素。:before 选择器在每个选定元素的内容之前插入一些内容。:checked 选择器匹配每个选中的 <input> 元素。

在 HTML 中，复选框位于 <label> 标签内。<span> 元素的主要功能是稍后从 CSS 中引用复选框。
在 CSS 中，display 属性指定元素的显示行为（渲染框的类型）。在我们的例子中，它被设置为 none，这将完全删除 <label> 标签内的 <input> 元素，即我们的默认复选框。我们使用 height、width 和 border 属性来生成自定义复选框。CSS height 和 width 属性设置元素的高度和宽度。border CSS 属性允许指定元素边框的样式、宽度和颜色。display 属性指定显示行为。内联值会将元素显示为内联。position 属性指定用于设置新复选框的元素的定位类型。

:before 伪元素用于在 <span> 元素之前插入我们的内容。:checked 选择器匹配每个被选中的元素，这意味着当我们的复选框被选中时，新的内容将被注入元素 <span> 之前，因为我们使用的是 :before 选择器。这些支持 content 属性，它允许注入 Unicode 图标。CSS 属性 content:'\2714' 的值表示一个复选标记图标。

示例代码：

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}