Cómo alinear las casillas de verificación y sus etiquetas de manera consistente en todos los navegadores

Este es uno de los problemas menores de CSS que me atormentan constantemente.

¿Cómo se alinean verticalmente las personas que trabajan con Stack Overflow checkboxesy utilizan todos los navegadoreslabels de manera consistente ?

Siempre que los alineo correctamente en Safari (normalmente los uso vertical-align: baselineen input), están completamente apagados en Firefox e IE.

Si lo arreglas en Firefox, Safari e IE inevitablemente quedarán arruinados. Pierdo tiempo en esto cada vez que codifico un formulario.

Aquí está el código estándar con el que trabajo:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

Expandir fragmento

Normalmente uso el reinicio de Eric Meyer, por lo que los elementos del formulario están relativamente libres de anulaciones. ¡Esperamos recibir algún consejo o truco que tengas para ofrecer!

Nov 21 '08 01:11 One Crayon

¡Advertencia! Esta respuesta es demasiado antigua y no funciona en los navegadores modernos.

_{No soy quien publicó esta respuesta, pero al momento de escribir esto, esta es, con diferencia, la respuesta más votada tanto en votos positivos como negativos (+1035 -17), y todavía está marcada como respuesta aceptada (probablemente porque el El cartel original de la pregunta es quien escribió esta respuesta).}

Como ya se señaló muchas veces en los comentarios, esta respuesta ya no funciona en la mayoría de los navegadores (y parece que no lo hace desde 2013).

Después de más de una hora de ajustar, probar y probar diferentes estilos de marcado, creo que puedo tener una solución decente. Los requisitos para este proyecto en particular fueron:

Las entradas deben estar en su propia línea.
Las entradas de las casillas de verificación deben alinearse verticalmente con el texto de la etiqueta de manera similar (si no idéntica) en todos los navegadores.
Si el texto de la etiqueta se ajusta, es necesario sangrarlo (por lo que no debe ajustarse debajo de la casilla de verificación).

Antes de entrar en ninguna explicación, sólo les daré el código:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Expandir fragmento

Aquí está el ejemplo funcional en JSFiddle .

Este código supone que está utilizando un reinicio como el de Eric Meyer que no anula los márgenes de entrada y el relleno del formulario (por lo tanto, coloca reinicios de margen y relleno en el CSS de entrada). Obviamente, en un entorno en vivo probablemente estarás anidando/anulando cosas para admitir otros elementos de entrada, pero quería mantener las cosas simples.

Cosas a tener en cuenta:

La *overflowdeclaración es un truco de IE en línea (el truco de propiedad estrella). Tanto IE 6 como 7 lo notarán, pero Safari y Firefox lo ignorarán correctamente. Creo que podría ser CSS válido, pero aún así es mejor usar comentarios condicionales; Solo lo usé por simplicidad.
Lo mejor que puedo decir es que la única vertical-aligndeclaración que fue consistente en todos los navegadores fue vertical-align: bottom. Configurar esto y luego posicionarlo relativamente hacia arriba se comportó de manera casi idéntica en Safari, Firefox e IE con solo uno o dos píxeles de discrepancia.
El principal problema al trabajar con alineación es que IE coloca un montón de espacio misterioso alrededor de los elementos de entrada. No es relleno ni margen, y es muy persistente. Establecer un ancho y un alto en la casilla de verificación y luego, overflow: hiddenpor alguna razón, corta el espacio adicional y permite que el posicionamiento de IE actúe de manera muy similar a Safari y Firefox.
Dependiendo del tamaño de su texto, sin duda necesitará ajustar la posición relativa, el ancho, el alto, etc. para que todo se vea bien.

No he probado esta técnica específica en ningún otro proyecto que no sea en el que estaba trabajando esta mañana, así que definitivamente ponte manos a la obra si encuentras algo que funcione de manera más consistente.

¡Advertencia! Esta respuesta es demasiado antigua y no funciona en los navegadores modernos.

Nov 20 '2008 19:11 One Crayon

A veces, la alineación vertical necesita dos elementos en línea (span, label, input, etc...) uno al lado del otro para funcionar correctamente. Las siguientes casillas de verificación están correctamente centradas verticalmente en IE, Safari, FF y Chrome, incluso si el tamaño del texto es muy pequeño o grande.

Todos flotan uno al lado del otro en la misma línea, pero el nowrap significa que todo el texto de la etiqueta siempre permanece al lado de la casilla de verificación.

La desventaja son las etiquetas SPAN sin sentido adicional.

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label><input type="checkbox"> <span>Label text x</span></label>
    <label><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

Expandir fragmento

Ahora, si tuviera un texto de etiqueta muy largo que necesitara ajustarse sin ajustarse debajo de la casilla de verificación, usaría relleno y sangría de texto negativa en los elementos de la etiqueta:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

Expandir fragmento

Jan 30 '2009 09:01 Nathan Bowers

Trabajando con la solución de One Crayon , tengo algo que funciona para mí y es más simple:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
}

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Expandir fragmento

Representa píxel por píxel igual en Safari (en cuya base confío) y tanto Firefox como IE7 funcionan igual de bien. También funciona para varios tamaños de fuente de etiquetas, grandes y pequeñas. Ahora, para arreglar la línea base de IE en selecciones y entradas...

Actualización: (edición de terceros)

¡ La bottomposición adecuada depende de la familia de fuentes y del tamaño de fuente! Descubrí que usar bottom: .08em;casillas de verificación y elementos de radio es un buen valor general. Lo probé en Chrome/Firefox/IE11 en Windows con fuentes Arial y Calibri usando varios tamaños de fuente pequeños/medianos/grandes.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Expandir fragmento

Apr 05 '2009 19:04 S.Serpooshan