如何使 :checked 在 Android 浏览器上工作？

Question

我正在尝试制作一个包含默认选项列表的表单，并且还可以扩展以显示几个附加选项。我使用以下 CSS 代码执行此操作：

.myForm .moreOpts {display:none;}
.myForm #more:checked +*+ .moreOpts {display:block;}

使用以下 HTML：

<form action="#" class="myForm">
  <ul>
    <li>
      <input type="checkbox" id="pref-1" name="pref-1" value="1">
      <label for="pref-1">Foo</label>
    </li>
    <li>
      <input type="checkbox" id="pref-2" name="pref-2" value="2">
      <label for="pref-2">Bar</label>
    </li>
    <li>
      <input type="checkbox" id="more" name="more" value="true">
      <label for="more">More options</label>
      <ul class="moreOpts">
        <li>
          <input type="checkbox" id="pref-3" name="pref-3" value="3">
          <label for="pref-3">Baz</label>
        </li>
        <li>
          <input type="checkbox" id="pref-4" name="pref-4" value="3">
          <label for="pref-4">Qux</label>
        </li>
      </ul>
    </li>
  </ul>
</form>

Demo

此代码在除 Android 浏览器 和 Dolphin 之外的所有浏览器中都能完美运行。我发现 an article 建议在 Dolphin 中添加 this“错误修复”，但只有 fixes my problem。

有没有办法让默认的 Android 浏览器也能正常工作？

Answer 1

您可以在details 元素的帮助下实现这一点。 Android supports it 从版本 4 开始。不过，你将不得不处理 IE 和 Firefox，还好这些浏览器支持 CSS3 伪状态，包括 :checked。

两个合并这两个，只需在不支持details的浏览器中使用复选框破解。下面是代码中解释的过程：http://jsfiddle.net/hF6JP/1/

编辑：这是最终解决方案，将标签放在摘要中解决了强制复选框切换选项的问题：http://jsfiddle.net/mYdsT/

Answer 2

我不会相信:checked 适用于所有浏览器。我会捕获#more 的click 事件，然后向父级添加一个类。使用jQuery 很容易。此选项适用于 Android 和 IE8。

$("#more").on("click", toggleCheckboxes);
var toggleCheckboxes = function(evt){
  var $this = $(this);
  $this.parents("li").toggleClass("show-more-options");
  evt.preventDefault()
}



.myForm .moreOpts {
  display:none;
}
.myForm .show-more-options .moreOpts {
  display:block;
}

:checked 在 IE8 中不受支持，遗憾的是这仍然很重要

https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

Answer 3

http://quirksmode.org/css/selectors/mobile.html#t60

:checked 显然不适用于任何版本的 Android。我不确定为什么这么多网页报告它应该可以工作（显然是从 2.1 开始），但这是错误的。

QuirksMode 的好处在于，每项功能在发布到网络之前都会在真实浏览器中进行实际测试。

JavaScript 似乎是您最好的解决方案。我什至会推荐 javascript，因为如果用户选中“更多”框，然后选择一些额外的选项，然后取消选中“更多”框......额外的选择仍然会被“选中”并且如果用户点击“提交”按钮。每次取消选中“更多”框时，您都必须取消选中这些框。唯一的方法是使用 javascript。

更新： QuirksMode 为 :checked 选择器编写了一个有缺陷的测试：

:checked {
    display: inline-block;
    width: 3em;
}

您会注意到，在 Android 上，宽度永远不会改变...但这是因为 Android 不会将宽度应用于复选框和单选框（而桌面浏览器会这样做）。

以下确实工作，即使在我的 Android 2.3 中：

:checked {
    display: inline-block;
    margin: 3em;
}

因此，正如其他 cmets 所述，问题在于选中的选择器和相邻的兄弟选择器的组合：

:checked + .test { /* does not work on android :( */ }
:checked ~ .test { /* does not work on android :( */ }