Dar estilo a formularios con CSS
Estilo en Formularios
Uno de los problemas más frecuentes que se presentan al momento de desarrollar un formulario,
se da al buscar un estilo uniforme para todos los campos.
La dificultad se presenta por el hecho de que todos los navegadores despliegan de manera distinta
los campos, además de que según el sistema operativo variará la manera en que se visualizarán
los botones e incluso las fuentes.
Para evitar caer en una desuniformidad y modificar los estilos por defecto, el uso de CSS se ha
vuelto fundamental, y gracias a él podemos cambiar los bordes, las fuentes y los fondos para
llegar a un estilo que se adecue más a lo que queremos mostrar en nuestro sitio.
Bordes
Quizás la manera más rápida y sencilla de modificar radicalmente la apariencia de un formulario
es cambiando los bordes de los campos que en él se despliegan.
Para ello tenemos que hacer uso de la propiedad CSS “border”, que nos permitirá cambiar el tipo
de borde, su color y tamaño.
Si quisiéramos por ejemplo tener un borde de tipo sólido, color gris y con 1 píxel de anchura,
basta con utilizar una sentencia como esta:
input, textarea { border: 1px solid #333; }
Esto se aplicará a todos los elementos de tipo “input” y “textarea” que tengamos en el formulario.
En cambio, si quisiéramos ceñirnos más al estilo original pero cambiando los colores, podemos
utilizar la propiedad “border-color” con un valor para cada sección, como se muestra aquí:
Si solo desea un borde inferior, use la propiedad border-bottom
En cuanto a lo que bordes para selects se refiere, estos se ven más limitadas por parte de los
navegadores, aunque en la actualidad estos problemas han tendido a reducirse.
Lo mismo puede ocurrir con los checkbox y los radio button, su estilo puede permanecer diferente
al resto de los bordes que manejamos.
Fuentes
Podemos especificar el tipo de fuente con la que se va a desplegar el texto dentro de cada campo
del formulario, y para ello basta con recurrir a la propiedad “font” de CSS. Al igual que con el
resto de los elementos donde podemos aplicar esta propiedad, el color y el tamaño son aspectos
elegibles.
input, textarea { font: 10px arial }
Fondo
El último aspecto relevante que se puede modificar para resaltar o dar un estilo distinto a los
elementos de un formulario, es el fondo.
Por lo general esta propiedad, representada por “background”, es tratada con mucho cuidado y
sólo se utiliza en casos donde la interfaz lo necesite, por ejemplo:
Un uso muy práctico del cambio de fondo se puede hacer en conjunto con el evento
“focus” mediante CSS, así podemos cambiar el fondo del campo únicamente cuando el usuario
se encuentre posicionado sobre él:
input:focus, textarea:focus { background: #ccc }
Campos de entrada
Utilice la propiedad width para determinar el ancho del campo de entrada:
input {
width: 100%;
}
El ejemplo anterior se aplica a todos los elementos <input>. Si solo desea aplicar estilo a un tipo
de entrada específico, puede usar selectores de atributos:
input[type=text] - solo seleccionará campos de texto
input[type=password] - solo seleccionará campos de contraseña
input[type=number] - solo seleccionará campos numéricos
etc.
Espacio en contenedores
Se puede utilizar la propiedad padding para agregar espacio dentro del campo de texto.
Sugerencia: cuando tiene muchas entradas una tras otra, es posible que también desee agregar
algunas margin, para agregar más espacio fuera de ellas:
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Entradas enfocadas
De forma predeterminada, algunos navegadores agregarán un contorno azul alrededor de la
entrada cuando se enfoca (se hace clic en ella). Puede eliminar este comportamiento
agregando outline: none;a la entrada.
Use el selector :focus para hacer algo con el campo de entrada cuando se enfoque:
input[type=text]:focus {
background-color: lightblue;
}
Entrada con icono/imagen
Si se desea un icono dentro de la entrada, podemos usar la propiedad background-image y la
colocamos con la propiedad background-position. También podemos agregar un gran relleno
izquierdo para reservar el espacio del ícono:
Ejemplo aplicación de estilo CSS en formulario
Realizamos el diseño en html con el siguiente código:
Vista de diseño sin aplicación de estilo:
Comentarios
Publicar un comentario