Día 74: CSS Forms

---

El apariencia de un formulario HTML se puede mejorar mucho con CSS.

---

Aplicar estilo a los campos de entrada

Use la propiedad width para determinar el ancho del campo de entrada:

Ejemplo:

El ejemplo anterior, los estilos se aplican a todos los elementos <input>. Si solo deseas diseñar un tipo de entrada específico, puedes 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.

---

Campos de entrada con relleno

Use la propiedad padding para agregar espacio dentro del campo de texto.

Tip: Cuando tienes muchos campos de entrada una detrás de la otra, es posible que también quieras agregar un margen para agregar más espacio fuera de ellas:

Ejemplo:

Ten en cuenta que hemos establecido la propiedad box-sizing en border-box. Esto asegura que el relleno y eventualmente los bordes estén incluidos en el ancho y alto total de los elementos.

---

Campos de entrada con borde

Use la propiedad border para cambiar el tamaño y el color del borde, y use la propiedad border-radius para agregar esquinas redondeadas:

Ejemplo:

Si solo quieres un borde inferior, usa la propiedad border-bottom:

Ejemplo:

---

Campos de entrada con color

Use la propiedad background-color para agregar un color de fondo al campo de entrada y la propiedad de color para cambiar el color del texto:

Ejemplo:

---

Campos de entrada con focus

Por defecto, algunos navegadores agregarán un contorno azul alrededor del campo de entrada cuando se hace clic en él. Puedes eliminar este comportamiento agregando outline:none; al campo de entrada.

Use el selector :focus para hacer algo con el campo de entrada cuando se hace clic en él:

Ejemplo:

---

Campos de entrada con ícono/imagen

Si quieres un ícono dentro del campo de entrada, use la propiedad background-image y colóquelo con la propiedad background-position. También observe que agregamos un relleno grande a la izquierda para reservar el espacio del ícono:

Ejemplo:

---

Campo de búsqueda con animación

En este ejemplo, usamos la propiedad transition para animar el ancho del campo de búsqueda cuando recibe :focus. Aprenderás más sobre la propiedad transition más adelante, en nuestro capítulo CSS Transitions.

Ejemplo:

---

Áreas de texto con estilos

Tip: Use la propiedad resize para evitar que se cambie el tamaño de las áreas de texto.

Ejemplo:

---

Menú de lista con estilos

Menú con lista de opciones.

Ejemplo:

---

Botones de entrada con estilos

Botones con estilos.

Ejemplo:

---

Formulario responsive

Cambie el tamaño de la ventana del navegador para ver el efecto. Cuando la pantalla tenga menos de 600px de ancho, haga que las dos columnas se apilen una encima de la otra en lugar de una al lado de la otra.

Avanzado: El siguiente ejemplo utiliza media queries para crear un formulario responsivo. Aprenderás más sobre esto en un capítulo posterior.

Ejemplo:

---

Resumen

Este artículo proporciona ejemplos de cómo aplicar estilos a los campos de entrada en formularios CSS, incluyendo ancho, relleno, borde, color, enfoque, íconos, áreas de texto y menús de lista. También se proporciona un ejemplo de formulario responsive.

---

Traducido con 💚 desde W3Schools.com