css 自定义多选框

CSS 自定义多选框是一种常见的交互效果，在前端开发中得到广泛使用。以下是一些关于如何实现这个效果的基本信息。

/* 选中多选框标记的样式 */
input[type="checkBox"]:checked + label::before {
    content: '\2714';
    color: #fff;
    background-color: #337ab7;
}

/* 多选框标记的通用样式 */
input[type="checkBox"] + label::before {
    display: inline-block;
    content: '';
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;
    line-height: 17px;
}

/* 多选框标记的鼠标悬浮时的样式 */
input[type="checkBox"] + label:hover::before {
    border-color: #999;
}

/* 多选框标记的聚焦时的样式 */
input[type="checkBox"]:focus + label::before {
    Box-shadow: 0 0 0 3px rgba(51,122,183,0.2);
}

以上的 CSS 代码使用了 CSS 伪类选择器以及基本的 CSS 样式属性。其中，选中多选框标记的样式使用了伪类选择器 `:checked`，而多选框标记的通用样式和鼠标悬浮时和聚焦时的样式则分别使用了 `:before` 伪元素选择器、`:hover` 伪类选择器和 `:focus` 伪类选择器。

为了实现这个效果，需要在 HTML 文档中将多选框组件以 `` 的形式添加到页面中，并使用 `label` 元素的 `for` 属性将其与一个标记元素关联。比如：

选项

在这个例子中，`label` 元素的 `for` 属性与 `input` 元素的 `id` 属性相同，这样当用户点击 `label` 元素时，与其关联的 `input` 元素就会被选中。这种方式也可以通过将 `input` 元素放在 `label` 元素内部达到同样的效果。

最后，还需要注意的是这个效果可能会在不同的浏览器中呈现不同的样式，因此需要进行一定的浏览器兼容性处理。这个可以通过在样式表中使用浏览器前缀以及一些浏览器特定的 CSS 样式属性实现。比如：

input[type="checkBox"]::-ms-check,input[type="checkBox"]::-ms-clear {
    display: none;
}

input[type="checkBox"]::-moz-focus-inner {
    border: none;
}