Los botones de opción muestran un fondo blanco no deseado en Chrome. Firefox está bien

Question

En Google Chrome, los botones de opción muestran un fondo blanco indeseado alrededor del círculo. Esto no se muestra en Firefox como se esperaba.

Por favor, consulte estas imágenes.

Y ella es el enlace directo de la página que tiene el tema (comprobar en Firefox y Chrome) https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

Cualquier trucos CSS que puedo aplicar para Chrome?

Answer 1

esto es un known Error en Chrome que no tiene soluciones reales.

La única opción que veo y uso en este momento es utilizar una hoja de sprite con imágenes de las casillas de verificación. Hice un violín a mostrar a usted con un poco de sprites al azar me encontré en el Internet:

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

Podrías crear tu propio sprite con radio a tope ons en su diseño deseado ...

Espero que ayude, si tiene más preguntas, hágamelo saber.

-Hannes

Answer 2

Envolver el elemento de radio en un div, y establecer el desbordamiento del div que a escondidas, y la frontera de radio a 100px. Luego configure la entrada de radio para mostrar el bloque y sin margen. Esto funcionó para mí:

de marcado:

<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

sé que esto es un viejo hilo, pero no tenía el mismo problema y me tomó un tiempo para averiguar lo fuera, así que estoy publicando esto si alguien más tiene el mismo problema. Lo descubrí bastante accidentalmente realmente. Estaba mirando otra cosa y amplié la página usando ctrl y scroll, y vi que el botón de opción ya no tenía fondo blanco (y se veía mejor). Así que acabo de poner:

zoom: 0.999; 

en la clase correcta de CSS y eso lo arregló para mí.