라디오 버튼은 Chrome에서 원치 않는 흰색 배경을 표시합니다. Firefox는 괜찮습니다.

Question

Google 크롬에서 라디오 버튼은 원 주위에 원치 않는 흰색 배경을 표시합니다. Firefox에서는 의도 한대로 표시되지 않습니다.

이미지를 확인하십시오.

그리고 그녀는 https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

내가 크롬을 신청할 수있는 모든 CSS 트릭 (파이어 폭스와 크롬에서 확인) 문제를 갖는 페이지의 직접 링크입니까?

Answer 1

실제 해결 방법이없는 Chrome의 버그입니다. known입니다.

이 시점에서 볼 때 유일한 옵션은 확인란의 이미지가있는 스프라이트 시트를 사용하는 것입니다.

Workaround

HTML :

<div id="show"> 
    <input type="radio" id="r1" name="rr" /> 
    <label for="r1"><span></span>Radio Button 1</label> 
<p /> 
    <input type="radio" id="r2" name="rr" /> 
    <label for="r2"><span></span>Radio Button 2</label> 
</div> 

CSS :

div#show { 
    width:100%; 
    height: 100%; 
    background:black; 
    margin: 10px; 
    padding: 10px; 
} 

input[type="radio"] { 
    /* Uncomment this to only see the working radio button */ 
    /* display:none; */ 
} 

input[type="radio"] + label { 
    color:#f2f2f2; 
    font-family:Arial, sans-serif; 
    font-size:14px; 
} 

input[type="radio"] + label span { 
    display:inline-block; 
    width:19px; 
    height:19px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat; 
    cursor:pointer; 
} 

input[type="radio"]:checked + label span { 
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat; 
} 

나는 내가 인터넷에서 발견 된 일부 무작위로 스프라이트로 당신에게 그것을 보여주기 위해 바이올린을 만든

당신은 라디오 엉덩이와 함께 자신의 스프라이트를 만들 수 있습니다 귀하가 원하는 디자인을 선택하십시오.

더 많은 질문이 있으시면 연락주세요.

-Hannes

Answer 2

랩 100 픽셀의 라디오 사업부의 요소, 숨겨진 해당 사업부의 오버 플로우를 설정하고, 국경 반경. 그런 다음 라디오 입력을 표시 블록에 설정하고 여백을 설정하지 않습니다. 이것은 나를 위해 일한 :

마크 업 :

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

CSS :

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

Answer 3

나는이 오래된 스레드 알지만, 나는이 같은 문제를 가지고 있었고, 그것을 알아낼 걸 렸어요 그래서 누군가 다른 사람이 같은 문제가 있다면 나는 이것을 게시하고있다. 나는 그것을 우연히 정말로 이해했다. 다른 것을보고 Ctrl + 스크롤을 사용하여 페이지를 확대하고 라디오 버튼이 더 이상 흰색 배경이 아니라는 것을 보았습니다. 그래서 난 그냥 넣어 :

zoom: 0.999; 

오른쪽 CSS 클래스에 나를 위해 그것을 고쳤다.