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

1819

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

¿Cómo se alinean verticalmente los usuarios de Stack Overflow checkboxesy su navegador cruzado de formalabels constante ?

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

Arreglelo en Firefox, y Safari e IE inevitablemente se estropearán. 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>

Por lo general, uso el restablecimiento 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!

5
  • 8
    Coloque cada casilla de verificación y etiqueta dentro de un elemento <li>. Agregue desbordamiento: oculto a <li> y haga 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 la etiqueta, obviamente. 18/01/2014 a las 18:37
  • 5
    Lo he logrado usando heighty line-heightatributos, eche un vistazo a jsfiddle.net/wepw5o57/3 9/12/14 a las 13:41
  • La manipulación con positiony topresolverá este problema Ejemplo: jsfiddle.net/ynkjc22s 9/04/2016 a las 12:59
  • 2019. sigue siendo el mismo problema. todavía necesito algunos trucos para que funcione :(
    dieter
    6 de abril de 2019 a las 8:40
  • @dieter vea mi respuesta, he explicado por qué se necesitan hacks y qué enfoque no es hacky: stackoverflow.com/a/56558431/3995261
    YakovL
    12/06/19 a las 10:31
1032

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

No soy el póster de esta respuesta, pero en el momento de escribir esto, esta es la respuesta más votada con diferencia tanto en votos positivos como negativos (+1035-17), y todavía está marcada como respuesta aceptada (probablemente porque el cartel original de la pregunta es el que 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:

  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 idéntica) en todos los navegadores.
  3. Si el texto de la etiqueta se ajusta, debe tener una sangría (por lo que no se debe ajustar debajo de la casilla de verificación).

Antes de entrar en una explicación, solo le 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á utilizando un restablecimiento como el de Eric Meyer que no anula los márgenes de entrada y el relleno del formulario (por lo tanto, coloca los restablecimientos de margen y relleno en el CSS de entrada). Obviamente, en un entorno en vivo, probablemente anidará / anulará 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 está mejor con comentarios condicionales; solo lo usé por simplicidad.
  • Lo mejor que puedo decir, la única vertical-aligndeclaración que fue consistente en todos los navegadores fue vertical-align: bottom. Establecer esto y luego posicionarlo relativamente hacia arriba se comportó casi de manera idéntica en Safari, Firefox e IE con solo uno o dos píxeles de discrepancia.
  • El principal problema al trabajar con la alineación es que IE tiene un montón de espacio misterioso alrededor de los elementos de entrada. No es relleno ni margen, y es malditamente persistente. Establecer un ancho y 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, 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 el que estaba trabajando esta mañana, así que definitivamente póngalo en marcha si encuentra algo que funcione de manera más consistente.


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

0
246

A veces, la alineación vertical necesita dos elementos en línea (intervalo, 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 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 extra sin sentido.

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

Ahora, si tuviera un texto de etiqueta muy largo que necesitara ajustar sin ajustar 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><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>
1
  • 23
    ¡Gracias! El "vertical-align: middle" tanto en la entrada como en el intervalo funcionó muy bien para mí. 12/08/10 a las 14:42
197

Trabajando con la solución de One Crayon , tengo algo que me funciona 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>

Representa píxel por píxel de la misma manera en Safari (en cuya línea de base confío) y tanto Firefox como IE7 son tan buenos. También funciona para varios tamaños de fuentes de etiquetas, grandes y pequeñas. Ahora, para corregir la línea de 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 la fuente! Descubrí que usar bottom: .08em;para 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>
1
  • 10
    Solo una nota para otros: esto no funcionará en IE6 porque no es compatible con la orientación CSS [type = checkbox]. 8 de abril de 2009 a las 0:18
154

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. Seguirá variando según los navegadores, pero la solución no es complicada.

input {
    vertical-align: -2px;
}

Referencia

0
94

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>
2
  • 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 muy útil para unir los dos elementos. 20 de nov. De 2008 a las 18:30
  • 28
    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 en que la entrada no está anidada. 20 de nov. De 2008 a las 18:34
40

Pruebe mi solución, la probé en IE 6, FF2 y Chrome y se procesa píxel a 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>
0
27

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

0
25

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 configuré todas las casillas de verificación 24pxpara la altura y el ancho. Para que el texto alineado hago la etiqueta es line-heighttambién 24pxy asignar vertical-align: top;este modo:

EDITAR: Después de la prueba de IE, agregué vertical-align: bottom;a la entrada y cambié el CSS de la etiqueta. Puede encontrar que necesita un caso css de IE condicional para resolver 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 se tomaron capturas de pantalla en retina y se usaron paralelos para IE):

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

0
20

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

0
17

Finalmente, echemos un vistazo a la fuente del problema.

Las casillas de verificación se representan utilizando imágenes (se pueden configurar 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

Puede 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 que se utilizan para la casilla de verificación . Es por eso que usar simplemente vertical-align: middleno 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 sólido (¡de varios navegadores!), Y aquí hay un ejemplo de dicho 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, aún así, ¿qué pasa con la solución sin imágenes personalizadas o pseudoelementos?

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 ícono de la casilla de verificación eran arbitrarios, no habí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 pseudo-márgenes en las casillas de verificación? Revisé Chrome 75, Vivaldi 2.5 (basado en Chromium), FireFox 54 (no preguntes por qué tan desactualizado), IE 11, Edge 42, Safari. (tomé prestado uno por un minuto, olvidé ver la versión). Solo Chrome y Vivaldi tienen tales pseudo-márgenes (sospecho que también todos los navegadores basados ​​en Chromium, 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% de ancho / alto y, por lo tanto, 0.9-1.0px en unidades absolutas. Sin embargo, la precisión puede ser cuestionada: pruebe con diferentes valores de zoompara la casilla de verificación. En mis pruebas tanto en Chrome como en 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>

así que probablemente ~ 14% y 2px son los valores correctos.

Ahora que sabemos (?) El tamaño del pseudo-margen, observemos 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,3 píxeles
  • 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, borde: 13px
  • Safari: n / a (creo que deberían compararse en la misma pantalla)

Ahora, antes de discutir cualquier solución o truco, preguntémonos: ¿qué es una alineación correcta ? ¿Qué queremos lograr? Hasta cierto punto es cuestión de gustos, pero básicamente puedo pensar en los siguientes aspectos "agradables" de las alineaciones:

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, una letra mayúscula u otra cosa (más grande, más pequeña o entre minúscula y mayúscula).

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 alineación vertical de la casilla de verificación / etiqueta

?

  1. En cuanto al ajuste del tamaño de casilla : existen width, height, size, zoom, scale(me he perdido algo?). zoomy scaleno permiten establecer un tamaño absoluto, por lo que pueden ayudar solo a ajustar el tamaño del texto, no a establecer el tamaño de varios navegadores (a menos que podamos escribir reglas específicas del navegador). sizeno funciona con Chrome (¿funcionó con el antiguo IE? 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 nuevamente, en Chrome establece el tamaño de toda la imagen, no la casilla de verificación en sí. Nota: es mínimo (ancho, alto) lo 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 los pseudo-márgenes en la casilla de verificación de Chrome no están configurados en cero para ningún ancho y alto, por lo que puedo ver.

  2. Me temo que no existe un método confiable solo de CSS en estos días.

  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 con top:

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

    (en la imagen: alineación vertical: superior, inferior e inferior sin sombra de cuadro)

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 de código anterior funciona con Chrome (navegadores basados ​​en Chromium), pero otros navegadores requieren un tamaño más pequeño de la casilla de verificación. Parece imposible ajustar tanto el tamaño como la alineación vertical de una manera que funcione con la peculiaridad de la imagen 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 :)

0
14

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:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}
<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>
1
  • 1
    ¿Por qué la necesidad de flexión: ninguna? 17 de junio a las 14:17
13

Creo que esta es la forma mas facil

input {
    position: relative;
    top: 1px;
}
<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>
1
  • la pregunta es: ¿funciona bien en todos los navegadores? ;-)
    JonSnow
    29/04/15 a las 13:58
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 una etiqueta de etiqueta.

10

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

Descubrí que vertical-align: subhace que las casillas de verificación se vean lo suficientemente bien alineadas en Chrome, Firefox y Opera. No puedo verificar Safari porque no tengo MacOS e IE10 está un poco apagado, pero he descubierto que es una solución lo suficientemente buena para mí.

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

1
  • Parece funcionar siempre que el tamaño de la fuente no sea demasiado grande.
    robsch
    27/09/18 a las 10:58
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>
1
  • 9
    bendiga por usar ems en lugar de pxs. 31 de enero de 2009 a las 6:45
8

La respuesta elegida con más de 400 votos a favor no me funcionó en Chrome 28 OSX, probablemente porque no se probó en OSX o porque funcionó en lo que fuera 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 se mire) 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 todos los navegadores / sistemas operativos. Aquí acabo de elegir algunos colores simples, pero siempre puedes agregar degradados lineales y demás para darle más fuerza.
  • 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 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 será esencialmente el mismo. Si desea mover las cosas, también tendrá que 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 estilo a 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 opción : http://jsfiddle.net/DtKrV/2/

¡Espero que alguien encuentre esto útil!

6

Nunca he tenido problemas para hacerlo así:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>
4
  • 4
    Como he dicho a los carteles 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 ajustara debajo de la entrada (sin dejar de tener etiquetas / grupos de entrada, cada uno en sus propias líneas). 20 de nov. De 2008 a las 19:56
  • 7
    Entonces, en lugar del marcado "innecesario" (utilizado probablemente por casi todos), ¿preferiría tener CSS innecesario? 30 de enero de 2009 a las 6:49
  • 10
    El problema de los soportes para envolver. Pero en general, sí, preferiría tener CSS extraño que marcado, ya que el CSS está almacenado en caché, pero es posible que el marcado tenga que cargarse de nuevo para cada nueva página. 31 de enero de 2009 a las 3:49
  • 4
    Compare: 1 instancia de CSS adicional frente a muchas instancias de marcado adicional.
    Greg
    17/08/11 a las 21:27
6

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

Compruebe 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>
3

Si está usando Twitter Bootstrap, puede usar la checkboxclase en <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
0
3

Con una casilla de verificación de tipo de entrada envuelta dentro de la etiqueta y flotando hacia la izquierda así:

<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 sea idéntica a la altura de la línea de (blocklevel).

3

Codifique la altura y el ancho de la casilla de verificación, elimine 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, mueva la casilla de verificación. Firefox, Chrome e IE7 + muestran el siguiente ejemplo de forma idéntica: http://www.kornea.com/css-checkbox-align

6
  • ¡Bonito! 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. 8 de agosto de 2014 a las 23:49
  • no, no lo hacen (compare 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
    28/06/19 a las 10:49
  • 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 el de otros para refutarlo. Los comparé y agregaría las capturas de pantalla, pero los comentarios no admiten la adición de imágenes; Sin embargo, puedes echar un vistazo a las imágenes 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
    27/10/19 a las 10:20
  • Visite la página a la que he vinculado en diferentes navegadores. 27/10/19 a las 10:46
  • Así que hice eso, ¿tú? :) ¿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, puede usar menciones a través de @ si está interesado en respuestas más rápidas)
    YakovL
    5/11/19 a las 15:13
3

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

Por lo general, dejo una casilla de verificación sin etiquetar y luego hago que su "etiqueta" sea un elemento separado. Es una molestia, pero hay tanta diferencia entre navegadores entre cómo 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 casilla de verificación es que en realidad son dos controles diferentes: la casilla y la etiqueta. Al usar una casilla de verificación, deja que los implementadores del control decidan cómo se muestran esos dos elementos uno al lado del otro (y siempre se equivocan, donde están equivocados = no lo que usted quiere).

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

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 colores y solo cambiará el ancho para adaptarse.

2

Lo siguiente proporciona una consistencia perfecta de 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. Muéstrelos como un 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 se 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 configurarse en 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 las últimas versiones de Chrome, Safari y Firefox en Mac, Windows, Iphone y Android. Y IE9.

Es probable que este método se aplique a todos los tipos de entrada que no superen una línea de texto. Aplique una regla de tipo que se adapte.

1
  • 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ías agregar un fragmento aquí?
    YakovL
    28/06/19 a las 10:25
2

Entonces 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 independientes para satisfacer sus necesidades. 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 entre navegadores, con un desbordamiento: oculto para cortar el exceso de una casilla de verificación estirada de 1px (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 usa "Checkbox Toggle Hack" para alternar el estado CSS de un DIV, que se ha posicionado correctamente en el navegador, y se configura con un simple objeto para los estados de casilla de verificación no marcada y marcada. Todo lo que se necesita es ajustar la posición del fondo con dicho Checkbox Toggle Hack. 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 todos los navegadores.

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, déjeme 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í con respecto a 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 por lo que he visto.

1

Esta no es la mejor manera de resolver el problema.

vertical-align: middle

Agregar style="position:relative;top:2px;"al cuadro de entrada lo movería hacia abajo 2px. Entonces, dependiendo de su tamaño de fuente, puede moverlo.

1

¡Sí, gracias! Esto también me ha estado volviendo loco desde 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 que podría explicar algunas de las diferencias, pero esto parece funcionar bien para mí.

1

position: relative; tiene algunos problemas en IE con el índice z y animaciones como slideUp / slideDown de jQuery.

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 necesite ajustes dependiendo del tamaño de fuente utilizado en <label>

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

1

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

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