28,391
社区成员
发帖
与我相关
我的任务
分享input的radio和checkbox自定义
<style>
label {
font-size: 12px;
cursor: pointer;
}
label i {
font-size: 12px;
font-style: normal;
display: inline-block;
width: 12px;
height: 12px;
text-align: center;
line-height: 12px;
color: #fff;
vertical-align: middle;
margin: -2px 2px 1px 0px;
border: #2489c5 1px solid;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
input[type="radio"]+i {
border-radius: 7px;
}
input[type="checkbox"]:checked+i,
input[type="radio"]:checked+i {
background: #2489c5;
}
input[type="checkbox"]:disabled+i,
input[type="radio"]:disabled+i {
border-color: #ccc;
}
input[type="checkbox"]:checked:disabled+i,
input[type="radio"]:checked:disabled+i {
background: #ccc;
}
</style>
<body>
<label><input type="checkbox"><i>此处为打钩字符</i>复选框</label><br>
<label><input type="checkbox" checked><i>此处为打钩字符</i>复选框</label><br>
<label><input type="checkbox" disabled><i>此处为打钩字符</i>复选框禁用</label><br>
<label><input type="checkbox" disabled checked><i>此处为打钩字符</i>复选框禁用已选</label><br>
<label><input type="radio" name="abc"><i>此处为打钩字符</i>单选框</label><br>
<label><input type="radio" name="abc" checked><i>此处为打钩字符</i>单选框</label><br>
<label><input type="radio" name="abc" disabled><i>此处为打钩字符</i>单选框禁用</label><br>
<label><input type="radio" name="def" disabled checked><i>此处为打钩字符</i>单选框禁用已选</label><br>
<script>
$(function () {
$("#check").button();
$("#format").buttonset();
});
</script>
</body>
附加效果图:
...全文
请发表友善的回复…
发表回复
