html - alinear input a la derecha css texto




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

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!

https://code.i-harness.com


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>


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>


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.


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


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

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

Fiddle


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.


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


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

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>


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

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

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.


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


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

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.


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>


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.


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


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





html-form