Cómo alinear casillas de verificación y sus etiquetas de forma cruzada entre navegadores

1735

Este es uno de los problemas menores de CSS que me atormenta constantemente. ¿Cómo hacer la gente alrededor de desbordamiento de pila alinear verticalmente checkboxesy su labelsconstante entre navegadores ? Cada vez que los alineo correctamente en Safari (generalmente usando vertical-align: baselineel input), están completamente apagados en Firefox e IE. Solucionarlo en Firefox, y Safari e IE están inevitablemente en mal estado. 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>

Usualmente uso el reinicio de Eric Meyer, por lo que los elementos de formulario están relativamente limpios de anulaciones. ¡Esperamos cualquier consejo o truco que tenga para ofrecer!

One Crayon
fuente
77
Coloque cada casilla de verificación y etiqueta dentro de un elemento <li>. Agregar desbordamiento: oculto a <li> y flotar la etiqueta y la casilla de verificación a la izquierda Entonces todos se alinean perfectamente bien. No ponga la casilla de verificación dentro del elemento de etiqueta obviamente.
volumen uno
55
Lo he logrado usando heighty line-heightatributos, eche un vistazo a jsfiddle.net/wepw5o57/3
TheGr8_Nik
La manipulación positiony topresolverá este problema Ejemplo: jsfiddle.net/ynkjc22s
Profesor08
2019. sigue siendo el mismo problema. Todavía necesito algunos hacks para que funcione :(
dieter
@dieter ve mi respuesta, he explicado por qué se necesitan hacks y qué enfoque no es hacky: stackoverflow.com/a/56558431/3995261
YakovL

Respuestas:

1010

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:

  1. Las entradas deben estar en su propia línea.
  2. Las entradas de las casillas de verificación deben alinearse verticalmente con el texto de la etiqueta de manera similar (si no es idéntico) en todos los navegadores.
  3. Si el texto de la etiqueta se ajusta, debe sangrarse (por lo tanto, no debe ajustarse 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 asume que está usando un reinicio como el de Eric Meyer que no anula los márgenes de entrada del formulario y el relleno (por lo tanto, coloca los reinicios de margen y relleno en el CSS de entrada). Obviamente, en un entorno en vivo, probablemente anidarás / anularás cosas 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 estrella). Tanto IE 6 como 7 lo notarán, pero Safari y Firefox lo ignorarán correctamente. Creo que puede ser CSS válido, pero aún así es mejor con 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 fuevertical-align: bottom . Establecer esto y luego posicionarse relativamente hacia arriba se comportó de manera casi 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 ni margen, y es muy persistente. Establecer un ancho y alto en la casilla de verificación y luegooverflow: hidden por alguna razón, corta el espacio extra 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, la altura, 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 proyecto que no sea en el que estaba trabajando esta mañana, así que sin duda si se encuentra algo que funcione de manera más consistente.

One Crayon
fuente
8
Nota. Probablemente debería poner un atributo "for" en su etiqueta, para asegurarse de que funcione para todos los navegadores y lectores de texto. (Me doy cuenta de que probablemente lo dejaste por simplicidad)
Armstrongest
306
Dios mío, no me había dado cuenta de cuántas personas ignoraban esto: si está ajustando la entrada en la etiqueta, el atributo "for" es innecesario. Siéntase libre de verlo usted mismo: w3.org/TR/html401/interact/forms.html#h-17.9.1
One Crayon
10
No estoy de acuerdo con la sugerencia sobre el uso de comentarios condicionales. Mantenga el hack * foobar CSS. Eso funciona bien, es utilizado por frameworks como YUI y le permite mantener unido lo que pertenece.
ebruchez
50
Probé esto en Chrome 28, Mac OSX, y la casilla de verificación es visiblemente más baja que el texto
MusikAnimal
99
Tenga en cuenta que esto no parece funcionar en las últimas versiones de Chrome (estoy usando v36). i.imgur.com/y9Ffxsh.png Editar: ni Firefox (v31)
Hans
214

A veces, la alineación vertical necesita dos elementos en línea (span, etiqueta, entrada, 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 recuadro significa que todo el texto de la etiqueta siempre permanece junto a la casilla de verificación.

La desventaja son las etiquetas SPAN sin sentido adicionales.

.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 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 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 negativo 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 for="x"><input type="checkbox" id="x" /> <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 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>

Nathan Bowers
fuente
19
¡Gracias! El "vertical-align: middle" tanto en la entrada como en el span funcionó muy bien para mí.
William Gross el
66
display: block; float: left;parece ser redundante
PHPst
44
No tiene que usar un atributo for cuando tiene la entrada dentro de la etiqueta. Funciona sin eso.
Tommy Sørensen el
66
Esta debería ser la respuesta aceptada por mi opinión. No hay ajustes necesarios.
Tim
44
Impresionante y confirmado todavía funciona en Chrome 58 (Windows) (a diferencia de la respuesta principal actual).
Jason C
188

Al trabajar 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>

Hace que píxel por píxel sea igual en Safari (en cuya línea de base confío) y tanto Firefox como IE7 funcionan como buenos. También funciona para varios tamaños de fuente de etiqueta, grandes y pequeños. 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 el tamaño de fuente! Encontré que usar los elementos bottom: .08em;de casilla de verificación y 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>

S.Serpooshan
fuente
10
Solo una nota para otros: esto no funcionará en IE6 porque no admite la orientación CSS [type = checkbox].
Un Crayon el
3
Simplemente puede agregar una clase en lugar de usar selectores no compatibles si se requiere soporte para IE6.
HartleySan
1
Este me funcionó. Sin embargo, en lugar de establecer "position: relative; bottom: 1px", puede usar "margin: 0 0 1px 0" para lograr el mismo resultado.
newman
142

Una cosa fácil que parece funcionar bien es aplicar un ajuste de la posición vertical de la casilla de verificación con alineación vertical. Todavía variará según los navegadores, pero la solución es sencilla.

input {
    vertical-align: -2px;
}

Referencia

Frank Schwieterman
fuente
99
Ese fue el cambio más pequeño entre todos los demás, lo que funciona para mí en las versiones más recientes de los navegadores.
Johnny_D
66
Eso funciona incluso mejor que con vertical-aligny position: relativeporque también funciona correctamente en IE9 :)
Dennis98
55
pero depende del tamaño de fuente. para tamaños de fuente grandes, debe ajustarse a valores negativos más altos, por ejemplo: vertical-align: -6px;
S.Serpooshan
1
presumiblemente, esto puede funcionar mejor con diferentes tipos de letra, si en conjuntoem
YakovL
92

tratar vertical-align: middle

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

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

digitalsanctum
fuente
<label for="blah">solo es necesario si está usando algo donde no tiene sentido que la etiqueta se ajuste (como un cuadro de texto; generalmente lo usaré <label for="blah">Foo</label><input id="blah" type="text" />en esa instancia). Con las casillas de verificación, encuentro que es menos marcado para envolverlo.
Un Crayon
13
No es exactamente cierto: Label-for permitirá a los usuarios hacer clic en la etiqueta para marcar la casilla de verificación, además de simplemente hacer clic en la casilla de verificación. Es bastante útil para unir los dos elementos.
EndangeredMassa
26
Si una entrada está anidada dentro de una etiqueta, haga clic en la etiqueta con activar / dar foco a la entrada; el atributo for es únicamente para el caso cuando la entrada no está anidada.
Un Crayon
3
Es cierto One Crayon, pero sigue siendo una buena práctica usar el atributo "for", o tendrá problemas con algunos navegadores que no reconocen esta IE de tos de sintaxis .
Armstrongest
si no desea que su casilla de verificación tenga una ID, entonces debe envolver la casilla de verificación dentro de la etiqueta
Simon_Weaver
39

Pruebe mi solución, lo probé en IE 6, FF2 y Chrome y se procesa 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>

Waleed Eissa
fuente
3
Interesante; Me gusta la idea de flotar ambos elementos; que arregla elegantemente el problema de envoltura. Yo estoy atado a envolver con la etiqueta de entrada, pero que el código es una diablos de mucho más limpio que la solución llegué a.
Un Crayon el
en este ejemplo, la entrada y la etiqueta de la casilla de verificación también deben tener una visualización de propiedad: bloque y, en tal caso, se tratarán como DIV normales que pueden alinearse fácilmente
se_pavel
55
esto tiene un problema, ¿qué sucede si la etiqueta no cabe en el espacio disponible? la etiqueta y la casilla de verificación están separadas (la casilla de verificación está arriba a la derecha y la etiqueta abajo a la izquierda). Si coloca la casilla de verificación dentro de su etiqueta, no tiene este problema.
Enrique
No funcionó al píxel, pero fue lo suficientemente decente como para que las cosas se vean mejor en los 3 principales navegadores. Supongo que podría haber pasado otra hora para ver que funcionaría mejor ...
Alexis Wilke
26

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: Fiddle

Buzogany Laszlo
fuente
22

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

Mi HTML es simplemente:

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

Luego configuro todas las casillas de verificación 24pxpara altura y anchura. Para que el texto alineado hago la etiqueta es line-heighttambién 24pxy asignarvertical-align: top; este modo:

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;
}
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

Si alguien encuentra que esto no funciona, por favor hágamelo saber. Aquí está en acción (en Chrome e IE: disculpas porque las capturas de pantalla se tomaron en la retina y el uso de paralelos para IE):

captura de pantalla de casillas de verificación: Chrome captura de pantalla de casillas de verificación: IE

Patrick
fuente
1
Esto es bastante antiguo, pero como pidió que se lo hiciera saber, esto no funciona bien en Firefox (las casillas de verificación están por encima de la línea de base). Te puede interesar una explicación detallada que
publiqué
20

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.

Plan B
fuente
altura de línea, duh. Siempre olvídate de eso. Buen trabajo, funciona muy bien.
Craig
13

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

El truco es usar la alineación vertical solo en las celdas de la tabla o el bloque en línea si se usa la etiqueta de etiqueta.

Carlo Pires
fuente
11

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:

es solo un cuadrado

Y aquí está la misma casilla de verificación sin estilo en Chrome:

es un cuadrado no centrado con "márgenes" a la derecha y en la parte inferior

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 (??):

para zoom = 10 es 7% mientras que para zoom = 11 es casi el doble de ese valor

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í):

ingrese la descripción de la imagen aquí

o tener la misma línea media en términos de letras minúsculas:

ingrese la descripción de la imagen aquí

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):

ingrese la descripción de la imagen aquí

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):

ingrese la descripción de la imagen aquí

Ahora qué herramientas tenemos para:

  1. ajustar el tamaño de la casilla de verificación
  2. reconocer Chromium con su casilla de verificación pseudo-marginada y establecer estilos específicos
  3. ajustar la casilla de verificación / etiquetar la alineación vertical

?

  1. 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.

  2. Me temo que actualmente no hay un método confiable de CSS solamente .

  3. 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:

    Comparación de alineación vertical: superior e inferior

    (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 :)

YakovL
fuente
¡Esta respuesta es tan profunda!
Marecky
10

Ahora que flexbox es compatible con todos los navegadores modernos, algo como esto me parece un enfoque más fácil.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>


Aquí está la demostración completa de la versión prefijada:

Bryan Willis
fuente
10

Creo que esta es la forma más fácil.

input {
    position: relative;
    top: 1px;
}
<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

gidzior
fuente
la pregunta es: ¿funciona bien en todos los navegadores? ;-)
JonSnow
9

No me gusta el posicionamiento relativo porque hace que el elemento se represente por encima de todo lo demás en su nivel (puede obtener algo superior si tiene un diseño complejo).

He descubierto que las vertical-align: subcasillas de verificación se ven lo suficientemente bien alineadas en Chrome, Firefox y Opera. No puedo verificar Safari ya que no tengo MacOS e IE10 está ligeramente apagado, pero he encontrado que es una solución lo suficientemente buena para mí.

Otra solución podría ser tratar de crear CSS específico para cada navegador y ajustarlo con una alineación vertical en% / pixels / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Waterplea
fuente
Parece funcionar siempre que el tamaño de la fuente no sea demasiado grande.
robsch
9

Esto funciona bien para mi:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}
<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

dylanfm
fuente
8
te bendiga por usar ems en lugar de pxs.
disponible el
7

La respuesta elegida con más de 400 votos a favor no funcionó para mí en Chrome 28 OSX, probablemente porque no se probó en OSX o porque funcionó en lo que sea que existiera en 2008 cuando se respondió esta pregunta.

Los tiempos han cambiado, y las nuevas soluciones CSS3 ahora son factibles. Mi solución usa pseudoelementos para crear una casilla de verificación personalizada . Entonces, las estipulaciones (pros o contras, como quiera que lo mires) son las siguientes:

  • Solo funciona en navegadores modernos (FF3.6 +, IE9 +, Chrome, Safari)
  • Se basa en una casilla de verificación diseñada a medida, que se representará exactamente igual en cada navegador / sistema operativo. Aquí acabo de elegir algunos colores simples, pero siempre se pueden agregar degradados lineales y demás para darle más explosión.
  • Está orientado a una determinada fuente / tamaño de fuente, que si se cambia, simplemente cambiaría la posición y el tamaño de la casilla de verificación para que parezca alineada verticalmente. Si se ajusta correctamente, el resultado final debería ser casi exactamente el mismo en todos los navegadores / sistemas operativos.
  • Sin propiedades de alineación vertical, sin flotadores
  • Debo usar el marcado proporcionado en mi ejemplo, no funcionará si está estructurado como la pregunta, sin embargo, el diseño se verá esencialmente igual. Si desea mover cosas, también deberá mover el CSS asociado

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}
<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Esta solución oculta la casilla de verificación y agrega y aplica estilos a los pseudoelementos a la etiqueta para crear la casilla de verificación visible. Debido a que la etiqueta está vinculada a la casilla de verificación oculta, el campo de entrada aún se actualizará y el valor se enviará con el formulario.

Y si está interesado, aquí está mi opinión sobre los botones de radio: http://jsfiddle.net/DtKrV/2/

¡Espero que alguien encuentre esto útil!

MusikAnimal
fuente
6

Nunca he tenido un problema al hacerlo así:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>
John Topley
fuente
44
Como dije a los pósters anteriores que recomendaron eso: no me gusta porque requiere un marcado innecesario. Además, probé ese marcado, pero fue difícil evitar que la etiqueta se ajuste debajo de la entrada (mientras todavía tenía etiqueta / grupo de entrada cada uno en sus propias líneas).
Un Crayon
77
Entonces, en lugar de un marcado "innecesario" (usado probablemente por casi todos), ¿preferiría tener CSS innecesario?
Robert C. Barth
10
El problema con los soportes de envoltura. Pero en general, sí, prefiero tener CSS extraño que marcado ya que el CSS está en caché, pero el marcado puede tener que cargarse de nuevo para cada página nueva.
Un crayón el
44
Compare: 1 instancia de CSS adicional -vs- muchas instancias de marcado adicional.
Greg
6

Si utiliza ASP.NET Web Forms , no necesita preocuparse por los DIV y otros elementos o tamaños fijos. Podemos alinear el <asp:CheckBoxList>texto configurandofloat:left el tipo de entrada CheckboxList en CSS.

Por favor verifique el siguiente código de ejemplo:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

Código .ASPX:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>
Rama Subba Reddy M
fuente
3

Si usa Twitter Bootstrap, puede usar la checkboxclase en <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
Sunil D.
fuente
3

Con una casilla de verificación de tipo de entrada envuelta dentro de la etiqueta y flotando a la izquierda de la siguiente manera:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

esto funcionó para mí:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

Asegúrese de que la altura de la es idéntica a la altura de la línea del (nivel de bloque).

Matijs
fuente
3

Codifique la altura y el ancho de la casilla de verificación, quite su relleno y haga que su altura más los márgenes verticales sean iguales a la altura de la línea de la etiqueta. Si el texto de la etiqueta está en línea, flote la casilla de verificación. Firefox, Chrome e IE7 + muestran el siguiente ejemplo de forma idéntica: http://www.kornea.com/css-checkbox-align

usuario2407309
fuente
¡Agradable! Pero debería considerar copiar el código HTML y CSS aquí. Se desaconsejan las respuestas que dependen tanto de un enlace externo. El enlace sigue siendo valioso para ver los resultados, pero creo que mostrar el código aquí te ayudará a obtener más votos.
Mariano Desanze
no, no lo hacen (comparar en Firefox y en Chrome, en Chrome las casillas de verificación están por encima de la línea de base), he explicado por qué
YakovL
Por qué, reclamas lo que no es compatible incluso con capturas de pantalla de ambos navegadores. Es su trabajo proporcionar pruebas de un reclamo cuando hace uno, no otros para refutarlo. Los comparé y agregaría las capturas de pantalla, pero los comentarios no admiten agregar imágenes; Sin embargo, puedes ver fotos en mi respuesta. Sin embargo, esto puede diferir con las versiones del navegador, por lo que sería útil proporcionar capturas de pantalla con anotaciones que contengan versiones del navegador.
YakovL
Visite la página a la que he vinculado en diferentes navegadores.
Vladimir Kornea
Así que hice eso, ¿verdad? :) ¿No ves la diferencia? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks Mientras que en FireFox están perfectamente alineados, en Chrome la casilla de verificación es sobre la línea de base (por cierto, puedes usar menciones a través de @ si estás interesado en respuestas más rápidas)
YakovL
3

input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

principal
fuente
2

Por lo general, dejo una casilla sin etiquetar y luego hago que su "etiqueta" sea un elemento separado. Es un dolor, pero hay tanta diferencia entre navegadores entre la forma en que se muestran las casillas de verificación y sus etiquetas (como habrás notado) que esta es la única forma en que puedo acercarme a controlar cómo se ve todo.

También termino haciendo esto en el desarrollo de winforms, por la misma razón. Creo que el problema fundamental con el control de la casilla de verificación es que en realidad son dos controles diferentes: el cuadro y la etiqueta. Al usar una casilla de verificación, le corresponde a los implementadores del control decidir cómo se muestran esos dos elementos uno al lado del otro (y siempre se equivocan, donde está mal = no es lo que quieres).

Realmente espero que alguien tenga una mejor respuesta a tu pregunta.

MusiGenesis
fuente
2

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

El código anterior colocará los elementos de su lista en tres grupos y solo cambiará los anchos para adaptarse.

Philip Bevan
fuente
2

Lo siguiente proporciona una consistencia perfecta en píxeles en todos los navegadores, incluso IE9:

El enfoque es bastante sensato, hasta el punto de ser obvio:

  1. Crea una entrada y una etiqueta.
  2. Muestrelos como bloque, para que pueda flotarlos como desee.
  3. Establezca la altura y la altura de la línea en el mismo valor para asegurarse de que se centren y alineen verticalmente.
  4. Para las medidas em , para calcular la altura de los elementos, el navegador debe conocer la altura de la fuente para esos elementos, y no debe establecerse en las medidas em.

Esto da como resultado una regla general aplicable a nivel mundial:

input, label {display:block;float:left;height:1em;line-height:1em;}

Con tamaño de fuente adaptable por formulario, conjunto de campos o elemento.

#myform input, #myform label {font-size:20px;}

Probado en los últimos Chrome, Safari y Firefox en Mac, Windows, Iphone y Android. Y IE9.

Es probable que este método sea aplicable a todos los tipos de entrada que no sean más altos que una línea de texto. Aplica una regla de tipo a tu medida.

Henrik Erlandsson
fuente
hm, esto se ve bien cuando la etiqueta comienza con una letra minúscula, pero si comienza con una mayúscula, es mucho peor. ¿Podría agregar un fragmento aquí?
YakovL
2

Así que sé que esto ha sido respondido muchas veces, pero siento que tengo una solución mucho más elegante que las que ya se han proporcionado. Y no solo 1 solución elegante, sino 2 soluciones separadas para hacerle cosquillas. Dicho esto, todo lo que necesita saber y ver está contenido en 2 JS Fiddle's, con comentarios.


La solución n. ° 1 se basa en la "casilla de verificación" nativa del navegador dado, aunque con un giro ... Está contenida en un div que es más fácil de colocar en el navegador cruzado, con un desbordamiento: oculto para cortar el exceso de una casilla de verificación estirada de 1 px (Esto es para que no puedas ver los feos bordes de FF)

HTML simple: (siga el enlace para revisar el CSS con comentarios, el bloque de código es para satisfacer stackoverflow) http://jsfiddle.net/KQghJ/

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

La solución n. ° 2 utiliza el "Hack de alternancia de casilla de verificación" para alternar el estado CSS de un DIV, que se ha posicionado correctamente en el navegador, y se configura con un sprite simple para la casilla de verificación desmarcada y marcada. Todo lo que se necesita es ajustar la posición del fondo con dicho Hack de alternancia de casilla de verificación. Esta, en mi opinión, es la solución más elegante, ya que tiene más control sobre sus casillas de verificación y radios, y puede garantizar que se vean iguales en todo el navegador.

HTML simple: (siga el enlace para revisar el CSS con comentarios, el bloque de código es para satisfacer StackOverflow) http://jsfiddle.net/Sx5M2/

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

Si alguien no está de acuerdo con estos métodos, por favor déjenme un comentario, me encantaría escuchar algunos comentarios sobre por qué otros no han encontrado estas soluciones, o si lo han hecho, ¿por qué no veo respuestas aquí sobre ellas? Si alguien ve que uno de estos métodos falla, sería bueno verlo también, pero estos han sido probados en los últimos navegadores y se basan en métodos HTML / CSS que son bastante antiguos y universales hasta donde yo he visto.

NinjaKC
fuente
1

Yay gracias! Esto también me ha estado volviendo loco por siempre.

En mi caso particular, esto funcionó para mí:

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

Estoy usando reset.css, lo que podría explicar algunas de las diferencias, pero esto parece funcionar bien para mí.

Jeff
fuente
1

position: relative; tiene algunos problemas en IE con z-index y animaciones como jQuery's slideUp / slideDown.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

El estilo probablemente necesita ajustes dependiendo del tamaño de fuente utilizado en <label>

PD:
uso ie7js para hacer que el css funcione en IE6.

Bob Fanger
fuente
1

Use simplemente vertical-align: sub, como pokrishka ya sugirió.

Violín

Código HTML:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

Código CSS:

.checkboxes input {
    vertical-align: sub;
}
Marco Sulla
fuente
1

Solución simple:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Probado en Chrome, Firefox, IE9 +, Safari, iOS 9+

Dylan Sharhon
fuente