Chrome & Opera 라디오 박스 섀도우가 사각형 임 - 해결 방법은 없나요?

Question

크롬과 오페라 모두 라디오 입력 스타일에 버그가있어 네이티브 요소가 아닌 사각형 상자 주위에 그림자가 나타납니다.

파이어 폭스 :

크롬 & 오페라 :

사람은 크롬 & 오페라 그림자를 제거하기보다는, 이것에 대한 해결 방법을 알고 있나요

?

Answer 1

div의 라디오 요소를 감싸고 해당 div의 오버플로를 hidden으로 설정하고 border-radius를 100px로 설정하십시오. 그런 다음 라디오 입력을 표시 블록에 설정하고 여백을 설정하지 않습니다.

<div class="radio_contain"> 
    <input type="radio" id="r1" name="r1"> 
</div> 



.radio_contain { 
    display: inline-block; 
    border-radius: 100px; 
    overflow: hidden; 
    padding: 0; 
} 
.radio_contain input[type="radio"] { 
    display: block; 
    margin: 0; 
}