Pregunta Cómo alinear las casillas de verificación y sus etiquetas consistentemente cruzado-navegadores


Este es uno de los problemas menores de CSS que me aqueja constantemente. ¿Cómo se alinean verticalmente las personas que rodean Stack Overflow? checkboxes y ellos labels consecuentemente navegador cruzado? Siempre que los alinee correctamente en Safari (generalmente usando vertical-align: baseline sobre el input), están completamente desactivados en Firefox e IE. Arreglarlo en Firefox, y Safari e IE están inevitablemente en mal estado. Pierdo el tiempo en esto cada vez que codigo un formulario.

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

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

Normalmente utilizo el restablecimiento de Eric Meyer, por lo que los elementos de formulario están relativamente limpios de anulaciones. ¡Esperamos recibir cualquier consejo o trucos que tengas que ofrecer!


1507


origen


Respuestas:


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

  1. Las entradas deben estar en su propia línea.
  2. Las entradas de casilla de verificación deben alinearse verticalmente con el texto de la etiqueta de forma similar (si no idéntica) en todos los navegadores.
  3. Si el texto de la etiqueta se ajusta, debe estar sangrado (por lo que no debe colocarse debajo de la casilla de verificación).

Antes de entrar en alguna explicación, solo te 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>

Aquí está el ejemplo de trabajo en JSFiddle.

Este código supone que está utilizando un restablecimiento como el de Eric Meyer que no anula los márgenes de entrada y el relleno (por lo tanto, se restablecen los márgenes y el relleno en la entrada de CSS). Obviamente, en un entorno en vivo es probable que estés anidando / anulando elementos para admitir otros elementos de entrada, pero quería mantener las cosas simples.

Cosas a tener en cuenta:

  • los *overflow declaración es un hack de IE en línea (el hack de propiedad de estrellas). Tanto IE 6 como 7 lo notarán, pero Safari y Firefox lo ignorarán correctamente. Creo que podría ser un CSS válido, pero aún está mejor con comentarios condicionales; solo lo usé por simplicidad.
  • Lo mejor que puedo decir es que el único vertical-align declaración que fue consistente en todos los navegadores fue vertical-align: bottom. Establecer esto y luego posicionarse relativamente hacia arriba se comportó casi de manera idéntica en Safari, Firefox e IE con solo un píxel o dos de discrepancia.
  • El principal problema al trabajar con la alineación es que IE pega un montón de espacio misterioso alrededor de los elementos de entrada. No es relleno o margen, y es malditamente persistente. Establecer un ancho y alto en la casilla de verificación y luego overflow: hidden por alguna razón, interrumpe el espacio adicional y permite que el posicionamiento de IE actúe de forma muy similar a Safari y Firefox.
  • Dependiendo del tamaño del texto, sin duda tendrá que ajustar el posicionamiento relativo, el ancho, el alto, etc. para que las cosas se vean bien.

¡Espero que esto ayude a alguien más! No he probado esta técnica específica en ningún otro proyecto que no sea el que estaba trabajando esta mañana, así que definitivamente busque si encuentra algo que funcione de manera más consistente.


914



A veces, la alineación vertical necesita dos elementos en línea (tramo, etiqueta, entrada, etc.) uno al lado del otro para funcionar correctamente. Las siguientes casillas de verificación están 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 el texto de la etiqueta completa siempre permanece al lado de la casilla de verificación.

La desventaja es las etiquetas SPAN extra sin sentido.

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Ahora, si tuvieras un texto de etiqueta muy largo que necesario para envolver sin envolver debajo de la casilla de verificación, usaría relleno y sangría de texto negativo en los elementos de la etiqueta:

.checkboxes label {
  display: block;
  float: left;
  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 for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>


170



Trabajando fuera de La solución de One Crayon, Tengo algo que funciona para mí y es más simple:

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>

Renderiza pixel-for-pixel de la misma manera en Safari (cuya línea de base confío) y tanto Firefox como IE7 lo comprueban como bueno. También funciona para varios tamaños de fuente de etiqueta, grandes y pequeños. Ahora, para corregir la línea de base de IE en selecciones e entradas ...


155



Una cosa fácil que parece funcionar bien es aplicar un ajuste a la posición vertical de la casilla de verificación con alineación vertical. Todavía será diferente en todos los navegadores, pero la solución no es complicada.

input {
    vertical-align: -2px;
}

Referencia


117



tratar vertical-align: middle

también su código parece que debería ser:

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


77



Prueba mi solución, lo probé en IE 6, FF2 y Chrome y se muestra píxel por píxel en los tres navegadores.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>


36



La única solución que funciona perfectamente para mí es:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Probado hoy en Chrome, Firefox, Opera, IE 7 y 8. Ejemplo: Violín


24



Usualmente uso la altura de la línea para ajustar la posición vertical de mi texto estático:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Espero que ayude.


16



No he probado por completo mi solución, pero parece funcionar muy bien.

Mi HTML es simplemente:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

Luego configuré todas las casillas de verificación para 24px para la altura y el ancho Para alinear el texto, hago la etiqueta line-height además 24px y asignar vertical-align: top; al igual que:

EDITAR: Después de las pruebas de IE, agregué vertical-align: bottom; a la entrada y cambió el CSS de la etiqueta. Puede encontrar que necesita un caso condicional de CSS css para ordenar el relleno, pero el texto y el cuadro están en línea.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

Si alguien descubre que esto no funciona, hágamelo saber amablemente. Aquí está en acción (en Chrome e IE: disculpas ya que las capturas de pantalla se tomaron en retina y se usaron paralelos para IE):

screenshot of checkboxes: Chrome screenshot of checkboxes: IE


12