Este es uno de los errores CSS que afectan a todos mis diseños y nunca se cómo resolverlo bien. Así que, ¿cómo alineáis vosotros los <label> asociados a los elementos checkbox de los formularios?
Mi problema es que cuando los alineo en Safari, se ven horrible en Firefox y Internet Explorer. Y si lo corrijo para Firefox, entonces Safari y Internet Explorer ya no se ven bien. Estoy harto de perder el tiempo con esto.
El código HTML que utilizo es el siguiente:
<form> <div> <label><input type="checkbox" /> Título del checkbox</label> </div> </form>
Estás leyendo una traducción autorizada de la pregunta How to align checkboxes and their labels consistently cross-browsers planteada por One Crayon en StackOverflow.
Respuestas
Aquí está el código CSS completo que puedes aplicar a tu ejemplo y con el que conseguirás una alineación perfecta en cualquier navegador:
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; }
Las limitaciones de esta solución son las siguientes:
- Los
<input />deben ocupar una línea cada uno. No puedes mostrar varios seguidos en la misma línea. - Los
<input />de un mismo grupo deben mostrar la misma alineación vertical. - Si el texto de la etiqueta es muy largo y pasa a la siguiente línea, debes indentarlo para que no se muestre debajo del checkbox.
@librosweb