html - ejemplo - las propiedades de pseudo contenido varían en cada navegador
html title attribute (1)
Cambié el enfoque. En lugar de usar contenido y altura de línea, cambié como se muestra a continuación
label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
padding:1px;
left: 0;
border:1px solid black;
border-radius: 50px;
}
input[type=radio]:checked + label:before {
border:1px solid blue;
background-color:blue;
box-shadow: 0 0 0 3px #fff inset;
width: 20px;
height: 20px;
}
Estoy usando CSS personalizado para dar estilo a las cajas de radio, pero ahora el problema es que
el círculo de radio verificado aparece en las posiciones diff en IE11, FF36 y Chrome. A continuación está la ilustración
CSS utilizado para lograr esto es el siguiente:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 32px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 23px;
height: 22px;
margin-right: 10px;
position: absolute;
left: 0;
border:1px solid $grey;
border-radius: 50px;
}
input[type=radio]:checked + label:before {
content: "/25CF";
border:1px solid $light-blue;
color: $light-blue;
font-size: 26px;
text-align: center;
line-height: 0rem;
padding-top: 7px;
}
Cualquier idea, por favor, para trabajar igual en todos los navegadores.