Formularios CSS
El aspecto de un formulario HTML puede ser mejorado a través del CSS.
Estilos a los campos input
La propiedad width a un campo de entrada, especifica su ancho:
input {
width: 100%;
}
Esto aplica a todos las etiquetas <input>, pero si queremos dar un estilo especifico a un tipo de campo podemos hacer uso de los selectores de atributo:
Declaración CSS | Descripción | Aplica a etiqueta HTML: |
---|---|---|
input[type=text] |
Aplica solo a las etiquetas input declaradas como tipo text. | <input type="text"> |
input[type=password] |
Aplica solo a las etiquetas input declaradas como tipo password. | <input type="password"> |
input[type=number] |
Aplica solo a las etiquetas input declaradas como tipo number. | <input type="number"> |
Campos de entrada con relleno
Se usa la propiedad padding para agregar espacio dentro del campo de texto.
Consejo: Cuando tiene muchas entradas una detrás de otra, es posible que también desee agregar un margen, para agregar más espacio fuera de ellas:
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Nota: Se especifica la propiedad
box-sizing: border-box;
para asegurarnos de que el relleno y el borde sean incluidos en el total del ancho y alto de las etiquetas HTML.
Campos de entrada con bordes
La propiedad border
es usada para especificar el tamaño y color del borde y también es usada la propiedad border-radius
para especificar las esquinas redondeadas.
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
Si solo se desea un borde inferior a los campos de entrada, se declara la propiedad border-bottom
de la siguiente manera;
input[type=text] {
border: none;
border-buttom: 2px solid red;
}
Campos de entrada coloreadas
Para colorear campos de entrada se utiliza la propiedad background-color
para cambiar el color de fondo y la propiedad color
para cambiar el color del texto:
input[type=text] {
background-color: green;
color: white;
}
Campos de entrada con foco
Por defecto, algunos navegadores web agregan un contorno azul alrededor del campo de entrada que tiene el foco. Se puede eliminar este comportamiento especificando la declaración outline: none;
y podemos usar el selector :focus
para establecer el estilo a la etiqueta que tiene el foco:
input[type=text]:focus {
background-color: lightblue;
border: 3px solid blue;
}
Campos de entrada con imagen o icono
Se puede agregan una imagen o icono dentro del campo de entrada, para esto, utilizamos la propiedad background-image
para especificar la imagen o icono y también utilizamos la propiedad background-position
para especifica la posición.
input[type=text] {
background-color: white;
background-image: url('lupa.png');
background-position: no-repeat;
padding-left: 40px;
}
Nota: En el ejemplo, se agrega un relleno izquierdo mayor para reservar espacio para la imagen o icono.
Campo de búsqueda animado
En este ejemplo, vamos a usar la propiedad transition para animar el ancho de un campo de búsqueda cuando obtiene el foco.
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text] {
width: 100%;
}
Estilos para áreas de texto
Para mantener el tamaño especificado a través de los estilos css y deshabilitar el botón de ajuste de tamaño para el usuario en la esquina inferior derecha, se especifica la propiedad resize
:
textarea {
width:100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Estilos para botones
Para declarar las mismas especificaciones a varias etiquetas, se pueden especificar los selectores separados por comas como a continuación:
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}