android - 单选按钮在可触摸设备上不起作用

Question

到目前为止，我已经构建了这种单选按钮样式，但它们不能在可触摸设备上工作。我只在 Android 上测试过它们，但我认为它们不会在任何触摸设备上工作。知道我做错了什么吗？整个示例可以在这里找到:http://jsfiddle.net/rpx6hwzx/这是我的 html 代码:

<form action='' method='post'>
    <div class="switch">
        <input type="radio" class="switch-input switch-input-on" name="radio" value="1" id="radio-on" checked="checked"> 
        <label for="radio-on" class="switch-label switch-label-on">On</label>

        <input type="radio" class="switch-input switch-input-off" name="radio" value="0" id="radio-off"> 
        <label for="radio-off" class="switch-label switch-label-off">Off</label>
        <span class="switch-selection"></span>        
    </div>    
</form> 

谢谢。

编辑:经过一些搜索后，android 似乎不支持以这种方式定位元素:

switch-input:checked + .switch-label-off ~ .switch-selection:before

还有其他选择吗？

Answer 1

这是一种仅使用 CSS 就功能性地设置表单样式的好方法。刚刚在 Chrome/Android 4.4 上测试过，原来的 fiddle 工作得很好，但选择器确实可以更简单。因为您想将 .switch-input:checked + .switch-label-off 更改为 .switch-input-off:checked。它会是这样的:

.switch-input-off:checked ~ .switch-selection:before {