复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)

时间:2021-12-09 19:17:07

复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)
复选框html内容如下:
<input type="checkbox" id="checkbox1"><label for="checkbox1">123</label>
<input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>
上面复选框的样式如下:
input[type="checkbox"] {
width: 20px;
height: 20px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 2px;
outline: none;
}
input[type="checkbox"]:checked {
background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
no-repeat center;
background-size: 100% 100%;
}