Echemos un vistazo al origen del problema.
Las casillas de verificación se representan con imágenes (se pueden establecer las personalizadas a través de CSS). Aquí hay una casilla de verificación (sin marcar) en Firefox, resaltada con el inspector DOM:
Y aquí está la misma casilla de verificación sin estilo en Chrome:
Puedes ver el margen (naranja); el relleno no está presente (se mostraría en verde). Entonces, ¿qué es este pseudo-margen a la derecha y en la parte inferior de la casilla de verificación? Estas son partes de la imagen utilizada para la casilla de verificación . Es por eso que usa solovertical-align: middle no es suficiente y esa es la fuente de los problemas entre navegadores.
Entonces, ¿qué podemos hacer al respecto?
Una opción obvia es: ¡reemplazar las imágenes! Afortunadamente, uno puede hacer esto a través de CSS y reemplazarlos con imágenes externas, imágenes base64 (en CSS), svg en CSS o simplemente pseudoelementos. Es un enfoque robusto (¡navegador cruzado!), Y aquí hay un ejemplo de tal ajuste robado de esta pregunta :
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
display: inline-block;
background: #fff;
border-radius: 5px;
border: 2px solid #ddd;
vertical-align: middle;
width: 10px;
height: 10px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
width: 1px;
height: 5px;
border: solid blue;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-radius: 0px;
margin: 0px 15px 5px 5px;
}
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
Es posible que desee leer algunos artículos más detallados sobre este estilo, como algunos que se enumeran aquí ; está fuera del alcance de esta respuesta.
Ok, ¿qué pasa con la solución no-custom-images-or-pseudo-elements?
TL; DR: parece que esto no funcionará, use la casilla de verificación personalizada en su lugar
Primero, observemos que si en otros navegadores esos pseudo márgenes dentro del icono de la casilla de verificación fueran arbitrarios, no habría una solución consistente. Para construir uno, tenemos que explorar la anatomía de tales imágenes en los navegadores existentes.
Entonces, ¿qué navegadores tienen los pseudo márgenes en las casillas de verificación? He comprobado Chrome 75, Vivaldi 2.5 (basado en cromo), FireFox 54 (no pregunte por qué está tan desactualizado), IE 11, Edge 42, Safari. (tomé prestado uno por un minuto, olvidé revisar la versión). Solo Chrome y Vivaldi tienen tales pseudo-márgenes (sospecho que todos los navegadores basados en Chromium también, como Opera).
¿Cuál es el tamaño de esos pseudo márgenes? Para resolver esto, uno puede usar una casilla de verificación ampliada:
input {
zoom: 10;
box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>
mi resultado es ~ 7% del ancho / alto y, por lo tanto, 0.9-1.0px en unidades absolutas. Sin embargo, la precisión puede ser cuestionada: pruebe diferentes valores de zoompara la casilla de verificación. En mis pruebas en Chrome y Vivaldi, el tamaño relativo del pseudo margen es muy diferente en los zoomvalores 10, 20 y en los valores 11-19 (??):
scale parece ser más consistente:
input {
transform: scale(10) translate(50%, 50%);
box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>
entonces probablemente ~ 14% y 2px son los valores correctos.
Ahora que sabemos (?) El tamaño del pseudo margen, tengamos en cuenta que esto no es suficiente. ¿Los tamaños de los íconos de las casillas de verificación son los mismos para todos los navegadores? ¡Pobre de mí! Esto es lo que muestra el inspector DOM para las casillas de verificación sin estilo:
- FireFox: 13.3px
- Basado en cromo: 12.8 px para todo, por lo tanto 12.8 (100% - 14%) = 11 px para lo que se percibe visualmente como casilla de verificación
- IE 11, Edge: 13px
- Safari: n / a (creo que deberían compararse en la misma pantalla)
Ahora, antes de discutir cualquier solución o truco, preguntémonos: ¿cuál es el correcto? alineación ? ¿Qué queremos lograr? Hasta cierto punto es una cuestión de gustos, pero básicamente puedo pensar en los siguientes aspectos de alineaciones "agradables":
texto y casilla de verificación en la misma línea de base (deliberadamente no ajusto el tamaño de la casilla de verificación aquí):
o tener la misma línea media en términos de letras minúsculas:
o la misma línea media en términos de letras mayúsculas (es más fácil ver la diferencia para diferentes tamaños de fuente):
y también tenemos que decidir si el tamaño de la casilla de verificación debe ser igual a la altura de una letra minúscula, mayúscula o algo más (más grande, más pequeño o entre minúsculas y mayúsculas).
Para esta discusión, llamemos a una alineación agradable si la casilla de verificación está en la misma línea de base que el texto y tiene el tamaño de una letra mayúscula (una opción muy discutible):
Ahora qué herramientas tenemos para:
- ajustar el tamaño de la casilla de verificación
- reconocer Chromium con su casilla de verificación pseudo-marginada y establecer estilos específicos
- ajustar la casilla de verificación / etiquetar la alineación vertical
?
En cuanto al ajuste del tamaño de casilla : existen width, height, size, zoom, scale(me he perdido algo?). zoomy scaleno permiten establecer el tamaño absoluto, por lo que pueden ayudar solo a ajustar el tamaño del texto, no establecer el tamaño del navegador cruzado (a menos que podamos escribir reglas específicas del navegador). sizeno funciona con Chrome (¿funcionó con IE antiguo? de todos modos, no es tan interesante). widthy heightfunciona en Chrome y otros navegadores, por lo que podemos establecer un tamaño común, pero de nuevo, en Chrome establece el tamaño de toda la imagen, no la casilla de verificación en sí. Nota: es mínimo (ancho, alto) que define el tamaño de una casilla de verificación (si ancho ≠ alto, el área fuera del cuadrado de la casilla de verificación se agrega al "pseudo-margen").
Una cosa desafortunada es que, por lo que puedo ver, los pseudo márgenes en la casilla de verificación de Chrome no están configurados en cero para ningún ancho y altura.
Me temo que actualmente no hay un método confiable de CSS solamente .
Consideremos la alineación vertical. vertical-alignno puede dar resultados consistentes cuando se establece en middleo baselinedebido al pseudo margen de Chrome, la única opción real para obtener el mismo "sistema de coordenadas" para todos los navegadores es alinear la etiqueta y la entrada a top:
(en la imagen: alineación vertical: superior, inferior e inferior sin recuadro)
Entonces, ¿qué resultado obtenemos de esto?
input[type="checkbox"] {
height: 0.95em;
width: 0.95em;
}
label, input {
vertical-align: top;
}
<label><input type="checkbox">label</label>
El fragmento anterior funciona con Chrome (navegadores basados en cromo), pero otros navegadores requieren un tamaño más pequeño de la casilla de verificación. Parece ser imposible ajustar tanto el tamaño como la alineación vertical de una manera que funcione en torno a la peculiaridad de la casilla de verificación de Chromium. Mi sugerencia final es: use casillas de verificación personalizadas en su lugar, y evitará la frustración :)
