到目前为止,我已经构建了这种单选按钮样式,但它们不能在可触摸设备上工作。我只在 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
还有其他选择吗?
最佳答案
这是一种仅使用 CSS 就功能性地设置表单样式的好方法。刚刚在 Chrome/Android 4.4 上测试过,原来的 fiddle 工作得很好,但选择器确实可以更简单。因为您想将 .switch-input:checked + .switch-label-off
更改为 .switch-input-off:checked
。它会是这样的:
.switch-input-off:checked ~ .switch-selection:before {
关于android - 单选按钮在可触摸设备上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25685726/