一波CSS的Checkbox复选框样式代码分享

一、如何实现自定义复选框样式

1. 隐藏原生复选框

在实现自定义复选框样式前，需要先隐藏原生复选框。可以使用display:none;对原生复选框进行隐藏。

1. 利用伪元素来实现样式

利用CSS的伪元素:before和:after来实现自定义复选框的外观效果。通过设置伪元素的content属性，我们可以添加图标或填充颜色，并调整元素的尺寸和位置。

1. 利用:checked状态来改变伪元素的样式

:checked状态代表该复选框被选中时的状态。利用:checked状态改变伪元素的样式，就可以实现选中状态下的样式效果。

二、示例

下面是两个实际的示例说明：

1. 示例1-圆形复选框

/* 隐藏原生复选框 */
input[type=checkbox]{
    display:none;
}

/* 自定义复选框样式 */
input[type=checkbox] + label:before{
    content:"";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    border:2px solid #ccc;
    border-radius:50%;
    background-color:#fff;
}

/* 改变选中状态下伪元素的样式 */
input[type=checkbox]:checked + label:before{
    background-color:#007bff;
}

上述代码中，我们通过:before伪元素实现了一个圆形复选框，利用:checked状态改变选中状态时的背景颜色。

1. 示例2-开关型复选框

/* 隐藏原生复选框 */
input[type=checkbox]{
    display:none;
}

/* 自定义复选框样式 */
input[type=checkbox] + label:before{
    content:"OFF";
    display:inline-block;
    width:50px;
    height:30px;
    margin-right:10px;
    border:1px solid #ccc;
    background-color:#fff;
    text-align:center;
    line-height:28px;
    color:#333;
    border-radius:15px;
}

/* 改变选中状态下伪元素的样式 */
input[type=checkbox]:checked + label:before{
    content:"ON";
    background-color:#007bff;
    color:#fff;
}

上述代码中，我们通过:before伪元素实现了一个开关型复选框，利用:checked状态改变选中状态时的文字和背景颜色。