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




cajas texto (25)

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!


Answers

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


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>


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.


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


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.


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


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.


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>


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

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

Fiddle


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!


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


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.


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/


Nunca he tenido un problema con hacerlo así:

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

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.


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.


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>


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

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

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

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


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


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>

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.


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


¿que tal este?

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

y puedes variar font-size







html css cross-browser alignment html-form