[分享]css3勾选样式

CSS3有许多新特性，其中之一是可以使用勾选样式来美化网页的复选框和单选框。下面我们一起来了解这个特性吧。input { display:none; / 隐藏默认复选框 / } label:befor...

CSS3有许多新特性，其中之一是可以使用勾选样式来美化网页的复选框和单选框。下面我们一起来了解这个特性吧。

input[type=checkbox] {
    display:none; /* 隐藏默认复选框 */
}
label:before {
    content:""; /* 设置内容为空，以便为伪元素提供一个容器 */
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    border:2px solid #bcbcbc;
    border-radius:2px;
    vertical-align:middle; /* 使勾选框与文本垂直居中 */
    cursor:pointer;
}
input[type=checkbox]:checked + label:before {
    content:"2713"; /* 设置勾选框的内容为对勾 */
    color:#fff;
    background:#2896f5;
    font-weight:bold;
    text-align:center;
    line-height:16px;
}

input[type=radio] {
    display:none; /* 隐藏默认单选框 */
}
label:before {
    content:""; /* 设置内容为空，以便为伪元素提供一个容器 */
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    border:2px solid #bcbcbc;
    border-radius:50%;
    vertical-align:middle; /* 使单选框与文本垂直居中 */
    cursor:pointer;
}
input[type=radio]:checked + label:before {
    content:"";
    background:#2896f5; /* 设置单选框为选中状态的背景色 */
    text-align:center;
    line-height:16px;
} 

以上代码是一段基本的CSS3勾选样式代码，其中input[type=checkbox]和input[type=radio]分别用于设置默认的复选框和单选框，然后使用标签来创建勾选框和单选框，使用: before伪元素来设置勾选和单选框的样式。

其中还用到了一些常见的CSS属性，如display:none用于隐藏默认复选框和单选框，margin-right用于设置勾选框和文本之间的距离，cursor:pointer用于设置鼠标样式等等。

通过使用CSS3勾选样式，可以让网页的复选框和单选框样式更加美观、简洁，同时也提高了用户的交互体验。我们可以根据自己的需要进行修改和优化，让网页更加出色。