[分享]css3改变checkbox样式

CSS3改变Checkbox样式使用伪类选择器:before和:after，通过设置content属性为""或"X"，达到改变Checkbox样式的目的。

/* 去掉Checkbox默认样式 */
input[type="checkbox"] {
    display: none; 
}

/* 显示自定义样式 */
input[type="checkbox"] + label:before {
    display: inline-block;
    content: ""; /* 或 content: "X"; */
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border: 1px solid #999999;
    border-radius: 2px;
    background-color: #ffffff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

/* Checkbox选中状态 */
input[type="checkbox"]:checked + label:before {
    content: "X";
    background-color: #009933;
    color: #ffffff;
}

/* 显示自定义文字 */
input[type="checkbox"] + label:after {
    content: "自定义文字";
    font-size: 14px;
    font-weight: normal;
    color: #333333;
}

/* Checkbox选中状态 */
input[type="checkbox"]:checked + label:after {
    color: #009933;
} 

以上CSS代码设置了自定义Checkbox样式，并设置了选中状态的样式。其中，伪类选择器:before和:after用于在label标签中创建伪元素，通过设置content属性为""或"X"来控制样式。检查时，通过在Checkbox前添加label标签进行关联，并使用+选择器来控制伪元素的显示。