如何使用CSS格式化复选框而不：选中

Question

How to style checkbox using CSS?中的所有答案都依赖于:checked伪类选择器。由于此选择器为not supported by about half of the mobile browsers，因此这些选项目前无用。

那么如何使用CSS（没有JS！）来设置复选框或单选按钮的样式而没有：checked伪类选择器？

Answer 1

<强> http://jsbin.com/rahuq/1/

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移动版和原生浏览器中进行了测试

---

上传Roko

编辑@what：

这是Firefox for Android的屏幕截图，显示这在该浏览器中不起作用： 由@what

上传