etiqueta ejemplo attribute acronimo html css css3 radio-button pseudo-element

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

JS Fiddle

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.