很多时候需要自定义单选,多选,用css自定义来帮助我们解决这个问题
兄弟们老规矩先上图
代码html
<label class="noselect checkLabel">
<input type="checkbox"><i>✓</i>复选框
</label><br>
<label class="checkLabel">
<input type="checkbox" checked><i>✓</i>复选框
</label><br>
<label class="checkLabel">
<input type="checkbox" disabled><i>✓</i>复选框禁用
</label><br>
<label class="checkLabel">
<input type="checkbox" disabled checked><i>✓</i>复选框禁用已选
</label><br>
<label class="checkLabel">
<input type="radio" name="abc"><i>✓</i>单选框
</label><br>
<label class="checkLabel">
<input type="radio" name="abc" checked><i>✓</i>单选框
</label><br>
<label class="checkLabel">
<input type="radio" name="abc" disabled><i>✓</i>单选框禁用
</label><br>
<label class="checkLabel">
<input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选
</label><br>
css
.checkLabel {
font-size: 12px;
cursor: pointer;
}
.checkLabel i {
font-size: 12px;
font-style: normal;
display: inline-block;
width: 12px;
height: 12px;
text-align: center;
line-height: 12px;
color: rgba(255, 255, 255, 0);
vertical-align: middle;
margin: -2px 2px 1px 0px;
border: #2489c5 1px solid;
border-radius: 50%;
}
.checkLabel input[type="checkbox"],
input[type="radio"] {
display: none;
}
.checkLabel input[type="checkbox"]:checked+i,
input[type="radio"]:checked+i {
background: #2489c5;
color: rgba(255, 255, 255, 1);
}
.checkLabel input[type="checkbox"]:disabled+i,
input[type="radio"]:disabled+i {
border-color: #ccc;
}
.checkLabel input[type="checkbox"]:checked:disabled+i,
input[type="radio"]:checked:disabled+i {
background: #ccc;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
拿走不谢,点个赞!!!