How to style checkbox using CSS?中的所有答案都依赖于:checked
伪类选择器。由于此选择器为not supported by about half of the mobile browsers,因此这些当前不是有用的答案。
那么,如何在不使用:checked伪类选择器的情况下使用CSS(没有JS!)来设置复选框或单选按钮的样式呢?
最佳答案
input[type=checkbox]:checked{
outline: 2px solid red;
}
在Android 2.3和4.3中进行了测试,效果很好:)
如果您真的想要样式,可以执行以下操作:
http://jsbin.com/mikul/1/
<input id="ch1" type="checkbox"><label for="ch1"></label>
input[id^=ch]{
display:none;
}
input[id^=ch] + label{
display:inline-block;
width:16px;
height:16px;
background:green;
border-radius:50%;
}
input[id^=ch]:checked + label{
background: red;
}
也在Android 2.3和4.3中进行了测试
还在Firefox Mobile浏览器中进行了测试,并且可以正常工作
还在Chrome Mobile和本机浏览器中进行了测试
由Roko上传
通过@what编辑:
这是Firefox for Android的屏幕截图,显示该功能不适用于该浏览器:
由@what上传
关于css - 如何在不使用:checked的情况下使用CSS设置复选框样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23336371/