Przyciski radiowe pokazują niechciane białe tło w Chrome. Firefox działa dobrze

Question

W przeglądarce Google Chrome przyciski opcji pokazują niechciane białe tło wokół tego kręgu. To nie jest wyświetlane w Firefoksie zgodnie z przeznaczeniem.

Proszę sprawdzić te obrazy.

A ona jest bezpośredni link do strony mającej problem (sprawdź w Firefoksie i Chrome) https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

żadnych sztuczek CSS, że mogę ubiegać się o Chrome?

Answer 1

To jest błąd w przeglądarce Chrome, który nie ma rzeczywistych obejść.

Jedyną opcją, którą widzę i używam w tym momencie, jest użycie arkusza sprite'a z obrazkami pól wyboru. Zrobiłem skrzypce pokazać to do was z pewnym losowym ikonki znalazłem w internecie:

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; 
} 

Możesz stworzyć swój własny sprite za pomocą radia w Twoim upragnionym projekcie ...

Mam nadzieję, że jeśli masz więcej pytań, pomóż mi.

-Hannes

Answer 2

Wrap element radiowych w div i ustawić przepełnienie tego div do ukryty i border-radius do 100px. Następnie ustaw wejście radiowe na blok wyświetlacza i bez marginesu. Ten pracował dla mnie:

Markup:

<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

Wiem, że to stary wątek, ale miałem ten sam problem i zajęło mi trochę czasu, aby to zrozumieć się, więc publikuję to, jeśli ktoś inny ma ten sam problem. Wyobraziłem to całkiem przypadkowo. Patrzyłem na coś innego i powiększałem widok na stronie za pomocą ctrl i scroll, i zobaczyłem, że przycisk radiowy nie ma już białego tła (i wyglądał lepiej). Więc po prostu wstawiłem:

zoom: 0.999; 

w prawej klasie css i to naprawiło to dla mnie.