derecha - alinear formulario html

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

Question

Este es uno de los problemas menores de CSS que me acosan constantemente. ¿Cómo alinean verticalmente las checkboxes desbordamiento de pila las checkboxes y sus labels coherente en todos los navegadores ? Siempre que los alineo correctamente en Safari (usualmente usando vertical-align: baseline de vertical-align: baseline en la input ), están completamente apagados en Firefox e IE. Repárelo en Firefox, y Safari e IE están inevitablemente enredados. 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. ¡Esperando cualquier consejo o truco que tengas que ofrecer!

Answer 1

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

El inconveniente es que las etiquetas SPAN sin sentido adicional.

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

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

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

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

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

Answer 2

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 versión demo completa con prefijo:

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 3

Así que sé que esto se ha respondido muchas veces, pero creo 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 a su fantasía. Dicho esto, todo lo que necesita saber y ver está contenido en 2 JS Fiddle''s, con comentarios.

La solución # 1 se basa en la "casilla de verificación" nativa del navegador dado, aunque con un giro ... Está contenida en una div que es más fácil de colocar en todos los 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 bordes feos de FF)

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

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

La solución # 2 usa el "Checkbox Toggle Hack" para alternar el estado CSS de un DIV, que se ha colocado correctamente en el navegador, y se configura con un simple sprite para la casilla de verificación estados sin marcar y marcados. Todo lo que se necesita es ajustar la posición de 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 igual en todos los navegadores.

HTML simple: (siga el enlace para revisar el CSS con comentarios, el bloque de código debe satisfacer ) 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é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 ellos? Si alguien ve que uno de estos métodos falla, también sería bueno verlo, pero se han probado en los últimos navegadores y se basan en métodos HTML / CSS que son bastante antiguos y universales, por lo que he visto.

Answer 4

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 la lista en tres controles y solo cambiará los anchos para adaptarse.

Answer 5

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

Answer 6

Con una casilla de verificación de tipo de entrada envuelta dentro de la etiqueta y flotando a la izquierda de esta 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 línea de (nivel de bloque).

Answer 7

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

input {
    position: relative;
    top: 1px;
}

Fiddle

Answer 8

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 de manera idéntica) en todos los navegadores.
3. Si el texto de la etiqueta se ajusta, debe estar sangrado (por lo tanto, no se debe ajustar 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 supone que está utilizando un restablecimiento como el de Eric Meyer que no invalida los márgenes de entrada y el relleno (por lo tanto, al colocar los ajustes de margen y relleno en el CSS de entrada). Obviamente, en un entorno en vivo es probable que anide / anule cosas para admitir otros elementos de entrada, pero quería mantener las cosas simples.

Cosas a tener en cuenta:

• La *overflow declaración de *overflow es un hack en línea de IE (el hack de propiedad de la estrella). Tanto IE 6 como 7 lo notarán, pero Safari y Firefox lo ignorarán adecuadamente. Creo que podría ser un CSS válido, pero todavía estás mejor con comentarios condicionales; Sólo lo usé por simplicidad.
• Lo mejor que puedo decir, la única declaración de vertical-align que fue consistente en todos los navegadores fue vertical-align: bottom . Establecer esto y luego posicionarlo 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 malditamente persistente. Al establecer un ancho y una altura en la casilla de verificación y luego overflow: hidden por 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 de su tamaño de 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 otro proyecto que no sea en el que estaba trabajando esta mañana, así que definitivamente cúbralo si encuentra algo que funcione de manera más consistente.

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

Answer 10

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 11

La respuesta elegida con más de 400 votos positivos no me funcionó en Chrome 28 OSX, probablemente porque no se probó en OSX o que 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 utiliza pseudoelements para crear una casilla de verificación personalizada . Así que las estipulaciones (pros o contras, sin embargo usted lo mira) son las siguientes:

• Solo funciona en navegadores modernos (FF3.6 +, IE9 +, Chrome, Safari)
• Se basa en una casilla de verificación de diseño personalizado, que se procesará exactamente igual en todos los navegadores / sistemas operativos. Aquí acabo de elegir algunos colores simples, pero siempre puedes agregar gradientes lineales y más para darle un toque más llamativo.
• Está adaptado a una cierta fuente / tamaño de letra, que si se cambia, simplemente cambiaría la posición y el tamaño de la casilla de verificación para que aparezca alineado verticalmente. Si se ajustó correctamente, el resultado final aún debería ser casi igual al mismo en todos los navegadores / sistemas operativos.
• Sin propiedades de alineación vertical, sin flotadores
• Debo usar el marcado provisto en mi ejemplo, no funcionará si está estructurado como la pregunta, sin embargo, el diseño se verá esencialmente igual. Si quieres mover las cosas, también tendrás que mover el CSS asociado.

Su 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 diseñ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 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 12

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 puse todas las casillas de verificación en 24px tanto para alto como para ancho. Para alinear el texto, hago que la line-height la line-height la etiqueta también sea de 24px y asigno vertical-align: top; al igual que:

EDITAR: Después de las pruebas de IE agregué vertical-align: bottom; a la entrada y cambió el CSS de la etiqueta. Es posible que necesite un caso de CSS css 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;
}

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

Answer 13

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

Descubrí que vertical-align: sub hace 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 y IE10 está ligeramente apagado, pero he encontrado que es una solución lo suficientemente buena para mí.

Otra solución podría ser intentar y hacer un CSS específico para cada navegador y ajustar con cierta alineación vertical en% / pixels / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/

Answer 14

Nunca he tenido un problema con hacerlo así:

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

Answer 15

Por lo general, dejo una casilla sin marcar y luego hago de su "etiqueta" un elemento separado. Es un dolor, pero hay tanta diferencia entre los navegadores entre cómo se muestran las casillas de verificación y sus etiquetas (como se ha dado cuenta) que esta es la única forma en que puedo acercarme para 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 caja y la etiqueta. Al usar una casilla de verificación, se lo deja a los implementadores del control para decidir cómo se muestran esos dos elementos uno al lado del otro (y siempre se equivocan, donde mal = no es lo que quiere).

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

Answer 16

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

Answer 17

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

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

Answer 18

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

Por favor revise 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 19

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

Por favor, sírvalo, 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 es anterior a la etiqueta, o después ... etc. Y nunca está de más proporcionarla ... así que ...

Sólo mis 2 centavos.

Answer 20

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

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

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

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

Renders píxel por píxel lo mismo 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 corregir la línea de base de IE en selecciones y entradas ...

Answer 21

Una cosa fácil que parece funcionar bien es aplicar y ajustar la posición vertical de la casilla de verificación con alineación vertical. Seguirá variando entre los navegadores, pero la solución no presenta complicaciones.

input {
    vertical-align: -2px;
}

Reference

Answer 22

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

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

Answer 23

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.

Answer 24

Yay gracias Esto también me ha vuelto 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 25

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

Answer 26

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.

Answer 27

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

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

1. Crear una entrada y una etiqueta.
2. Visualízalos como bloque, para que puedas flotarlos como quieras.
3. Establezca la altura y la altura de la línea en el mismo valor para asegurarse de que se centran y alinean verticalmente.
4. Para las mediciones de em , para calcular la altura de los elementos, el navegador debe conocer la altura de la fuente de esos elementos, y no debe configurarse en mediciones de em.

Esto resulta en una regla general aplicable globalmente:

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

Con tamaño de fuente adaptable por formulario, fieldset 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 sean superiores a una línea de texto. Aplicar una regla de tipo para adaptarse.

Answer 28

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

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

Answer 29

<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

Debería envolver los controles de formulario agrupados en sus propios conjuntos de campos de todos modos, aquí, reproduce el wrappa. establecer entrada / etiqueta mostrar: bloque, entrada flotar a la izquierda, etiqueta flotar a la derecha, establecer sus anchos, controlar el espaciado con los márgenes izquierdo / derecho, alinear el texto de la etiqueta según corresponda.

asi que

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

Es probable que también deba configurar el borde, el contorno y la altura de la línea en ambas, para las soluciones de medios / navegador cruzado.

Answer 30

<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 en el bloque en línea si se usa la etiqueta de etiqueta.