自定义复选框

参考地址

浏览器默认的复选框样式一般都是这样的：

默认的复选框.png

有时，项目出于用户体验的要求（仅仅是用户体验），需要美化复选框，使其看起来顺眼一点儿，那就要用css来“改造”它。

思路如下：

• 在复选框的后边紧邻添加label标签，并用for属性与复选框关联。
• 通过复选框的选中状态，更改label标签的样式。
• 隐藏复选框，使用户只能看到label标签样式的变化。

开干吧！

首先，复选框一般都是这样：

<input type="checkbox" id="myCheckbox">

然后，添加label标签：

<input type="checkbox" id="myCheckbox"><label for="myCheckbox"></label>

最后，添加样式：

/* “+”代表相邻元素，即当前元素的下一元素 */
#myCheckbox +label{
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c00;
    cursor: pointer;
}

/* “：”表示当前input框的值，即checked */
#myCheckbox:checked +label::before{
    content: "\2714";
    color: white;
    font-size: 12px;
}

input[type=checkbox] {display: none;}

最终的效果：

美化的复选框.png