Javascript 输入型收音机在iPhone上不工作

我正在开发一个网站，在这里我使用的输入是单选，但不是单选按钮，而是在每个输入中为不同的图像进行了更改。当我在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手机中从一种输入切换到另一种输入，它似乎工作得很好

下面是我的问题：

---

提前感谢。

尝试将onclick=放在html标签上。如果您没有标签标签，只需添加标签，使其包含单个收音机选项。

我想您的问题与输入无关。这很可能是不透明度转换和如何触发的问题-请参阅：

---

顺便说一句：你的CSS非常冗余-枯燥。

我已经尝试在CSS上使用标签{cursor:pointer；}，但它不起作用，在标签和表单上使用onclick=也不起作用。在输入上注释或删除：hover效果删除：hover效果不起作用注意：onclick应该是空的，为了充当假点击检测器。所以我需要移除标签的内部？因为我试图将onclick=放在标签标签上，但没有用，请尝试一下。无论如何，跨度都是无用的，因为标签已经有了它们的所有属性，除非您有专门用于跨度的css。