Optionsfelder zeigen in Chrome einen unerwünschten weißen Hintergrund an. Firefox ist in Ordnung

Question

In Google Chrome zeigen Optionsfelder einen unerwünschten weißen Hintergrund um den Kreis herum. Dies wird in Firefox nicht wie beabsichtigt angezeigt.

Bitte überprüfen Sie diese Bilder.

Und sie ist die direkte Verbindung von der Seite das Problem mit (Check-in Firefox und Chrome) https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

Alle CSS-Tricks, die ich für Chrome anwenden können?

Answer 1

Dies ist ein known Bug in Chrome, die keine echten Problemumgehungen hat.

Die einzige Option, die ich zu diesem Zeitpunkt sehe und verwende, ist ein Sprite-Sheet mit Bildern der Kontrollkästchen. Ich habe eine Geige, es Ihnen zu zeigen, mit einem zufälligen Sprite ich im Internet gefunden:

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

Sie könnten Ihr eigenes Sprite mit Radio Hintern erstellen ons in Ihrem gewünschten Design ...

Hoffen Sie, dass hilft, wenn Sie weitere Fragen haben, lassen Sie es mich wissen.

-Hannes

Answer 2

Wickeln Sie das Funkelement in einem div und festgelegt, dass Überlauf des div zu versteckt und border-radius zu 100px. Stellen Sie dann den Radio-Eingang auf den Display-Block und keinen Rand ein. Dieser arbeitete für mich:

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

Ich weiß, das ist ein alter Thread, aber ich hatte das gleiche Problem, und es dauerte eine Weile, um einen Reim heraus, also poste ich das, wenn jemand anderes das gleiche Problem hat. Ich habe es ganz zufällig wirklich herausgefunden. Ich schaute auf etwas anderes und vergrößerte die Seite mit Strg und Scrollen, und sah, dass der Radiobutton keinen weißen Hintergrund mehr hatte (und besser aussah). Also setze ich einfach:

zoom: 0.999; 

in der richtigen CSS-Klasse und das reparierte es für mich.