输入类型收音机在 iPhone 上不起作用答案

【问题标题】：Input type radio isn't working on iPhone输入类型收音机在 iPhone 上不起作用
【发布时间】：2015-01-31 09:29:44
【问题描述】：

我正在开发一个网站，在该网站上我使用“radio”类型的输入，但我在每个输入中更改了不同的图像而不是单选按钮。当我在 iPhone 上选择一个输入时，我无法更改另一个输入，即使我点击另一个输入，它也会停留在第一个输入，我不知道为什么会这样。这是我的 html 和 CSS

<input type="radio" name="feeling" value="awesome" id="awesome"><label for="awesome"><span></span></label>
<input type="radio" name="feeling" value="normal" id="normal"><label for="normal"><span></span></label>
<input type="radio" name="feeling" value="bad" id="bad"><label for="bad"><span></span></label>

input[type="radio"] {
    display:none;
}

#awesome + label span {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    vertical-align: middle;
    background: url(awesome.png) left top no-repeat;
    opacity: 0.6;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}


#normal + label span {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    vertical-align: middle;
    background: url(normal.png) left top no-repeat;
    opacity: 0.6;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}

#bad + label span {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    vertical-align: middle;
    background: url(bad.png) left top no-repeat;
    opacity: 0.6;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}

#bad + label, #normal + label, #awesome + label {
    margin: 1rem 2px;
} 

#awesome + label span:hover, #normal + label span:hover, #bad + label span:hover {
    opacity: 1;
}

#awesome:checked + label span, #normal:checked + label span, #bad:checked + label span {
    opacity: 1;
 }

我尝试在 Android 手机中从一种输入更改为另一种输入，它似乎运行良好。

这是我的问题：http://jsfiddle.net/bhzabL20/

提前致谢。

【问题讨论】：

我已经尝试过使用 label { cursor: pointer; } 在 CSS 上，但它不起作用，并且在标签和表单上使用 onclick="" 也不起作用
尝试评论或删除:hover对input的影响
移除 :hover 效果不起作用

标签： javascript html css iphone

【解决方案1】：

尝试将onclick="" 放在html 中的label 标记上。如果您没有标签标签，只需添加它们，以便它们各自包含一个单选选项。

【讨论】：

注意：onclicks 应该是空的，以便充当假点击检测器。
所以我需要删除标签标签内的吗？因为我试图将 onclick="" 放在标签标签上但它不起作用
试试看。无论如何，跨度都是无用的，因为标签已经拥有所有属性，除非您有专门用于跨度的 css。

【解决方案2】：

我猜你的“问题”与input 无关。这更有可能是不透明度过渡（以及如何触发）的问题 - 请参阅：iOS CSS opacity + visibility transition

顺便说一句：您的 CSS 非常“冗余” - DRY。

【讨论】：