输入式收音机在 iPhone 上不起作用

我正在开发一个网站，其中我使用类型为"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/

提前谢谢。