Cómo alinear las casillas de verificación y sus etiquetas constantemente cruz-navegadores

Question

Este es uno de los menores CSS problemas que aqueja a mí constantemente.¿Cómo la gente alrededor de Desbordamiento de Pila alinear verticalmente checkboxes y sus labels constantemente cross-browser?Siempre que puedo alinear correctamente en Safari (por lo general el uso vertical-align: baseline en el input), que están completamente fuera de en Firefox y IE.Revisión en Firefox, y Safari e IE son inevitablemente en mal estado.Puedo perder el tiempo en esto cada vez que el código de un formulario.

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

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

Yo normalmente uso Eric Meyer reset, por lo que elementos de formulario son relativamente limpio de los reemplazos.Mirando hacia adelante a cualquier consejos o trucos que usted tiene que ofrecer!

Answer 1

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 la casilla 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 que no debe ajustarse debajo de la casilla de verificación).

Antes de entrar en cualquier 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á utilizando 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:

• La declaración *overflow 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.
• Como mejor puedo decir, la única declaración vertical-align que fue consistente en todos los navegadores fue vertical-align: bottom. Configurar 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 luego overflow: 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.

Answer 2

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 ahora 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 necesitaba para 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 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>

Answer 3

Trabajando fuera de 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>

Representa el píxel por píxel de la misma manera 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 de base de IE en selecciones y entradas ...

---

Actualización: (Edición de terceros)

¡La posición correcta de bottom depende de la familia de fuentes y el tamaño de fuente! Encontré el uso de bottom: .08em; para la casilla de verificación & Amp; elementos de radio es un buen valor general. Lo probé en Chrome / Firefox / IE11 en Windows con Arial & Amp; Calibre las fuentes con varios tamaños de letra 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>

Answer 4

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

Answer 5

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

Answer 6

Pruebe mi solución, la 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>

Answer 7

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

Answer 8

Usualmente uso la altura de 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 eso ayude.

Answer 9

No he probado completamente mi solución, pero parece un gran trabajo.

Mi HTML es simplemente:

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

Yo, a continuación, establezca todas las casillas de verificación para 24px por tanto la altura y la anchura.Para hacer que el texto alineado a la que hago la etiqueta de la line-height también 24px y asignar vertical-align: top; así:

EDITAR: Después de la IE pruebas he añadido vertical-align: bottom; a la entrada y cambiar la etiqueta de la CSS.Usted puede encontrar que usted necesita de un condicional es decir css caso de clasificar relleno - pero el texto y la caja son 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 se entera de que esto no funciona, por favor, por favor, hágamelo saber.Aquí está en acción (en Chrome y IE - disculpas como las capturas de pantalla fueron tomadas en la retina y el uso de parallels para IE):

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

Answer 11

Esto funciona bien para mí:

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>

Answer 12

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

He descubierto que vertical-align: sub hace que las casillas de verificación se vean lo suficientemente bien alineadas en Chrome, Firefox y Opera. No puedo comprobar Safari porque 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 intentar crear CSS específicos para cada navegador y ajustarlo con un poco de alineación vertical en% / píxeles / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Answer 13

Ahora que flexbox es compatible con todos los navegadores modernos, algo así parece un enfoque más fácil para mí.

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

Answer 14

Nunca tuve problemas para hacerlo así:

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

Answer 15

Solo quería agregar a la discusión sobre el atributo 'for' en las etiquetas (ligeramente fuera del tema):

Indíquelo, incluso cuando no sea necesario, porque es muy conveniente usarlo desde javascript:

var label = ...
var input = document.getElementById(label.htmlFor);

Eso es mucho más conveniente que tratar de averiguar si la etiqueta tiene la entrada anidada, o si la entrada está antes de la etiqueta, o después ... etc. Y nunca está de más suministrarla ... así que.

Solo mis 2 centavos.

Answer 16

Si usa formularios web ASP.NET no necesita preocuparse por los DIV y otros elementos o tamaños fijos. Podemos alinear el texto <asp:CheckBoxList> configurando float:left al tipo de entrada CheckboxList en CSS.

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>

Answer 17

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 sucedió en 2008 cuando se respondió esta pregunta.

Los tiempos han cambiado, y las nuevas soluciones CSS3 ahora son factibles. Mi solución utiliza pseudoelements para crear una casilla de verificación personalizada . Por lo tanto, las estipulaciones (pros o contras, como quiera que 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 cada navegador / SO. Aquí acabo de elegir algunos colores simples, pero siempre puedes 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 modifica, 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 exactamente igual en todos los navegadores / sistemas operativos.
• Sin propiedades de alineación vertical, sin flotantes
• Debo usar el marcado proporcionado en mi ejemplo, no funcionará si está estructurado como la pregunta, sin embargo, el diseño esencialmente se verá igual. Si desea mover cosas, también deberá mover el CSS asociado

Tu HTML:

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Tu CSS:

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

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.

jsFiddle: http://jsfiddle.net/SgXYY/6/

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!

Answer 18

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

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

Answer 19

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

Answer 20

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

Answer 21

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 de (blocklevel).

Answer 22

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Answer 23

Vamos finalmente a echar un vistazo a la fuente del problema

Las casillas se representa mediante imágenes (uno puede establecer en forma personalizada a través de CSS).Aquí es un (desactivada) casilla de verificación en FireFox, destacó con DOM inspector:

Y aquí está el mismo sin estilo casilla de verificación en Chrome:

Usted puede ver el margen (naranja);el relleno no está presente (se muestra en color verde).Así que, lo que esta pseudo-el margen de la derecha y en la parte inferior de la casilla de verificación? Estas son partes de la imagen que se utiliza para la casilla de verificación.Es por eso que el uso de sólo vertical-align: middle en realidad no es suficiente y que es la fuente de la cruz-problemas con el navegador.

Entonces, ¿qué podemos hacer acerca de esto?

Una opción más obvia es reemplazar las imágenes!Afortunadamente, se puede hacer esto a través de CSS y reemplazar aquellos con imágenes externas, base64 (en-CSS) imágenes, en la CSS svg o pseudo-elementos.Es un robusto (cross-browser!) enfoque, y he aquí un ejemplo de este tipo de 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 un poco más en profundidad los artículos acerca de tal estilo de algunos de los mencionados aquí;está fuera del alcance de esta respuesta.

Ok, lo que sobre no-personalizadas-en imágenes-o-pseudo-elementos de la solución?

TL;DR:parece que esto no funciona, utilice checkbox personalizado en lugar

En primer lugar, notemos que si en otros navegadores aquellos pseudo-dentro de los márgenes de casilla de verificación icono eran arbitrarias, no hubo solución consistente.Para construir uno, tenemos que explorar la anatomía de este tipo de imágenes en navegadores existentes.

Entonces, ¿qué hacen los navegadores tienen la pseudo-márgenes en las casillas?He comprobado Chrome 75, Vivaldi 2.5 (basado en Chromium), FireFox 54 (no preguntes por qué tan anticuado), es decir, 11, Borde 42, Safari ??(tomado uno por un minuto, se olvidó de revisar la versión).Sólo Chrome y Vivaldi ha dicho pseudo-márgenes (sospecho que todos Cromo basadas en navegadores, como Opera).

¿Cuál es el tamaño de los pseudo-márgenes?Para averiguar esto se puede utilizar un zoom a la casilla:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

mi resultado es de ~7% de la anchura/altura y, por tanto, de 0.9-1.0 px en unidades absolutas.La precisión puede ser cuestionada, a pesar de que:pruebe diferentes valores de zoom para la casilla de verificación.En mis pruebas, tanto en Chrome y Vivaldi el tamaño relativo de la pseudo-margen es muy diferente a zoom los valores 10, 20 y en valores 11-19 (??):

scale parece ser más coherente:

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 de la pseudo-margen, tomemos nota de esto no es suficiente.Son los tamaños de la casilla de verificación de los iconos de la misma para todos los navegadores?Ay!Aquí es lo que DOM inspector de espectáculos sin estilo casillas de verificación:

• FireFox: 13.3 px
• Basado en Chromium: 12.8 px para el conjunto de la cosa, por lo tanto 12.8 (100% - 14%) = 11px por lo que se percibe como una casilla de verificación
• Es decir, 11, Borde: 13px
• Safari:n/a (estos deben ser comparadas en la misma pantalla, creo)

Ahora, antes de discutir soluciones o trucos, que vamos a hacer:¿qué es un correcto la alineación?Lo que estamos tratando de lograr?Hasta cierto punto es una cuestión de gusto, pero básicamente me puede pensar en el siguiente "agradable" alineaciones " aspectos:

de texto y casillas de verificación en la misma línea de base (deliberadamente no ajustar el tamaño de la casilla de verificación aquí):

o tienen el mismo medio de la línea en términos de letras minúsculas:

o de la misma línea del medio en términos de letras mayúsculas (es más fácil ver la diferencia de tamaño de fuente diferente):

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 o algo más (mayores, menores o entre minúsculas y capital).

Para esta discusión, vamos a llamar a una alineación bueno si la casilla de verificación que está en la misma línea de base como el texto y tiene el tamaño de una letra mayúscula (una muy discutible elección):

Ahora ¿qué herramientas tenemos a:

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

?

1. Con respecto a la casilla de verificación ajuste del tamaño de la:hay width, height, size, zoom, scale (he perdido de algo?). zoom y scale no permita poner en valor absoluto, por lo que puede ayudar sólo con ajustar el tamaño del texto, no se establece de la cruz-el tamaño del navegador (a menos que podamos escribir en el navegador normas específicas). size no funciona con Chrome (lo hizo de trabajo con el viejo de la IE?de todos modos, eso no es interesante). width y height funciona en Chrome y otros navegadores, por lo que podemos establecer un tamaño común, pero, de nuevo, en Chrome, el navegador establece el tamaño de la imagen entera, no la casilla de verificación sí mismo.Nota:es mínimo(anchura, altura), que define una casilla de verificación tamaño (si la anchura ≠ altura, el área de fuera de la casilla de verificación de la plaza se agrega a la "pseudo-margen").

   Una cosa lamentable es, el pseudo-márgenes en Chrome casilla de verificación no se ponen a cero para cualquier anchura y altura, por lo que puedo ver.

2. Me temo que hay no confiable CSS-único método en estos días.

3. Vamos a considerar la alineación vertical. vertical-align no puede dar resultados consistentes cuando se establece en middle o baseline debido a la Chrome pseudo-margen, la única opción real para obtener el mismo "sistema de coordenadas" para todos los navegadores es alinear la etiqueta y la entrada a la top:

   

   (en la imagen:vertical-align:la parte superior, parte inferior y la parte inferior sin box-shadow)

Entonces, ¿qué resultado podemos obtener 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 (Chromium basado en los navegadores), pero otros navegadores requieren un menor tamaño de la casilla de verificación.Parece ser imposible para ajustar el tamaño y la alineación vertical de una manera que funciona alrededor de Cromo de la casilla de verificación de la imagen capricho. Mi sugerencia final es:el uso personalizado de casillas de verificación en su lugar – y te vas a evitar la frustración :)

Answer 24

Normalmente dejo una casilla de verificación sin etiqueta y luego hago su " label " Un elemento separado. Es una pena, 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 utilizar 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 incorrecto = no es lo que desea).

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

Answer 25

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

Answer 26

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. Cree una entrada y una etiqueta.
2. Visualízalos como bloque, para que puedas flotarlos como quieras.
3. Establezca la altura y la altura de línea en el mismo valor para asegurarse de que se centren y alineen verticalmente.
4. Para em mediciones, para calcular la altura de los elementos, el navegador debe conocer la altura de la fuente para esos elementos, y no debe establecerse em mediciones.

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

Es probable que este método sea aplicable a todos los tipos de entrada que no sean superiores a una línea de texto. Aplique una regla de tipo a su medida.

Answer 27

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 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 " del navegador dado, aunque con un giro ... Está contenido 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 1px (esto es para que no pueda ver los bordes feos de FF)

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

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

---

La solución n. ° 2 usa " Casilla de verificación Habilitar Hack " para alternar el estado CSS de un DIV, que se ha colocado correctamente en el navegador, y configurarlo con un simple sprite para la casilla de verificación sin marcar 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 & Amp; radios, y podemos garantizar que se vean igual en 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í con respecto a ellos? Si alguien ve que alguno de estos métodos falla, sería bueno ver eso 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.

Answer 28

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 que podría explicar algunas de las diferencias, pero esto parece funcionar bien para mí.

Answer 29

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>

PS:
Utilizo ie7js para hacer que el css funcione en IE6.

Answer 30

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

Fiddle

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