我正在尝试制作一个默认选项列表的窗体,并且还可以扩展以显示一些exta选项.我使用以下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>
该代码在每个浏览器中都能完美工作,Android浏览器和Dolphin除外.我发现an article建议添加this“bugfix”,但只有fixes my problem在海豚.
有没有办法让这个工作的默认Android浏览器呢？
解决方法
您可以在细节元素的帮助下实现此目的. Android
supports it自版本4起.但是,您将不得不处理IE和Firefox,但幸运的是这些浏览器支持CSS3伪状态,包括：checked.
两个合并这两个,只需使用不支持详细信息的浏览器中的复选框.以下是代码中所述的过程：http://jsfiddle.net/hF6JP/1/
编辑：这是最终的解决方案,将标签放在摘要中解决了强制复选框切换选项的问题：http://jsfiddle.net/mYdsT/
