input[type=checkbox] ; input[type=radio] 改变默认样式

/*改变checkbox 默认样式*/

input[type="checkbox"] {

-webkit-appearance: none; /*清除复选框默认样式*/

height: 22px;

width: 22px;

vertical-align: middle;

background: #ffffff;

}

input[type="checkbox"]:checked {

background: #fff url(../imgs/checkmark.png) no-repeat center; /*复选框的选中图，*/

}

/*改变radio 默认样式*/

input[type="radio"] + label::before {

content: "\a0"; /*不换行空格*/

display: inline-block;

vertical-align: middle;

font-size: 18px;

width: 1em;

height: 1em;

margin-right: .4em;

border-radius: 50%;

border: 1px solid #01cd78;

text-indent: .15em;

line-height: 1;

}

/*改变radio 样式*/

input[type="radio"] {

position: absolute;

clip: rect(0, 0, 0, 0);

}

input[type="radio"]:checked + label::before {

background-color: #EB4B3D;

background-clip: content-box;

padding: .15em;

}

如果觉得《input[type=checkbox] ; input[type=radio] 改变默认样式》对你有帮助，请点赞、收藏，并留下你的观点哦！