Question

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

提前致谢。

Answer 1

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

Answer 2

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

BTW：你的CSS非常“多余” - 干。

输入型收音机不能在iPhone上运行

2 个答案: