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上测试过，原来的小提琴工作得很好，但选择器确实更简单。由于您要将.switch-input:checked + .switch-label-off更改为.switch-input-off:checked。它会是这样的：

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

单选按钮不适用于可触摸设备

1 个答案: