El otro día estaba yo intentando conseguir que un formulario respondiese correctamente a los cambios de resolucción. Probaba y probaba métodos, pero parece ser que especificar el padding y el width en porcentaje no funcionaba en los campos de formulario. Me puse a buscar posibles soluciones y al final conseguí encontrar la solucción.
El problema
Las etiquetas <input> y <textarea> siempre se han comportado de forma extraña. Por eso, cuando defines width: 100%; o bien width: auto; y le sumas padding o border, sobrepasa el ancho del contenedor. Tampoco se nos permite definir en porcentaje nada que no sea el ancho, por ello conseguir que se alineen es una tarea ardua.
La solución
Basta con introducir nuestros <input> y <textarea> dentro de un <div> y todos los estilos aplicarselos a este último en lugar de al campo del formulario. Veamos el código HTML:
<fielset> <div> <input type="text"> <div> <fieldset> <fielset> <div> <textarea rows="10"> <div> <fieldset>
Y ahora le daríamos estilos, eliminando cualquier rastro de los campos y mostrando el <div>.
fieldset {
padding-bottom: 10px;
border: 0px;
}
fieldset > div {
padding: 5px 15px;
border: 1px solid #F1F1F1;
background: #F9F9F9;
color: #555;
font-size: 13px;
font-family: Helvetica Neue;
}
input[type=text],
textarea {
margin: 0;
padding: 0;
width: 100%;
outline: none;
border: 0;
background: none;
color: inherit;
font-size: inherit;
font-family: inherit;
resize: none;
}Conclusión
Con este truquito puede que nos sea más fácil controlar los formularios en nuestro siguiente trabajo. Como siempre, podeis ver la demostración, tan solo cambiar el tamaño de la ventana de vuestro navegador y vereis como el formulario adapta su tamaño. ¿Que os parece está técnica? ¿Teneis algún otro método mejor para conseguir el objetivo? No dudéis en comentarlo.