입력 유형 라디오가 작동하지 않습니다.

Question

"라디오"유형의 입력을 사용하는 웹 사이트를 개발 중이지만 라디오 버튼 대신 각 입력에서 다른 이미지로 변경했습니다. 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; 
} 

나는 안드로이드 전화에서 하나의 입력에서 다른 것으로 바꾸려고 시도했는데 완벽하게 작동하는 것 같다. 사전에 http://jsfiddle.net/bhzabL20/

감사 : 여기

내 문제와 바이올린입니다.

Answer 1

onclick=""을 html의 label 태그에 넣으십시오. 레이블 태그가없는 경우 각각 단일 라디오 선택 사항을 포함하도록 추가하십시오.

Answer 2

"문제"는 input과 아무런 관련이 없습니다. 불투명도 전환 (및 트리거 방법)에 더 많은 문제가 발생할 수 있습니다. - iOS CSS opacity + visibility transition

BTW : CSS는 매우 "중복"합니다.