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