如何在没有 :checked 的情况下使用 CSS 设置复选框样式答案

【问题标题】：How to style checkbox using CSS without :checked如何在没有 :checked 的情况下使用 CSS 设置复选框样式
【发布时间】：2014-04-28 17:42:43
【问题描述】：

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

那么如何在没有 :checked 伪类选择器的情况下使用 CSS（没有 JS！）设置复选框或单选按钮的样式？

【问题讨论】：

在How to style checkbox using CSS? 的已接受答案的“旧答案”部分中没有回答这个问题
@Joe 第一个旧答案在大多数浏览器中不起作用，第二个使用 JS。还是我忽略了什么？
这个答案的重点是没有跨浏览器的方法来设置框的样式。 :checked 伪类在这个方向上取得了一些进展，但即使它也没有得到普遍支持。您唯一可靠的方法是使用一些 javascript。

标签： css checkbox radio-button

【解决方案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上传

【讨论】：

@what 看起来我是唯一在这里做测试的人。它有效。
@what 我有三星 Galaxy S3，兄弟，即使在 HTC Desire 上也能正常工作
它适用于 Android 默认浏览器，但它不适用于我的三星 Galaxy S III 上的 Firefox for Andorid (28.0.1)
@what 我也有 28.0.1 并且运行良好。奇怪的。用力点按它会改变颜色
我发布了一个屏幕截图作为对您帖子的编辑。根据需要接受或删除。我确实用力敲击;-)