El autor seleccionó el Fondo de Diversidad en Tecnología para recibir una donación como parte del programa Escribir para Donaciones.
Introducción
Los formularios web son un elemento común del diseño de sitios web, que van desde un campo de formulario de búsqueda hasta formularios de contacto y filtrado de datos complejos. Saber cómo usar CSS para estilizar y trabajar con estos elementos ayuda a proporcionar mejores soluciones a estos problemas cotidianos y puede mejorar la experiencia del usuario en su sitio web.
Este tutorial cubre la creación y estilización de un formulario web que solicita varios datos al usuario. El formulario utilizará campos de texto, botones de radio, casillas de verificación, selecciones desplegables, un área de texto y botones de enviar y restablecer. Creará y estilizará este formulario y sus elementos restableciendo los estilos con la propiedad appearance, configurando su propio estilo consistente para el formulario, agregando respuestas de marcador de posición para los campos de texto y personalizando los botones de radio y las casillas de verificación con varias pseudo-clases y pseudo-elementos.
Requisitos previos
- Experiencia usando selectores avanzados para encontrar y aplicar estilos a elementos HTML con CSS. Para obtener más información al respecto, consulta el tutorial Cómo Seleccionar Elementos HTML Usando Selectores de ID, Clase y Atributos en CSS.
- Conocimiento del modelo de caja CSS, que puedes encontrar en el tutorial Cómo Trabajar con el Modelo de Caja en CSS.
- Familiaridad con las pseudo-clases en CSS. Echa un vistazo a Cómo Usar Enlaces y Botones con Pseudo-Clases de Estado en CSS para una introducción.
- Un archivo HTML vacío guardado en tu máquina local como
index.htmlal que puedas acceder desde tu editor de texto y navegador web preferidos. Para empezar, consulta nuestro tutorial Cómo Configurar Tu Proyecto HTML, y sigue Cómo Usar y Entender Elementos HTML para obtener instrucciones sobre cómo ver tu HTML en tu navegador. Si eres nuevo en HTML, prueba toda la serie Cómo Construir un Sitio Web con HTML.
Configuración de la Base HTML y CSS
En esta primera sección, configurarás el HTML y los estilos iniciales con los que trabajarás a lo largo del resto del tutorial. Este HTML establecerá la estructura básica de la página y creará los campos del formulario que luego estilizarás.
Comienza abriendo el archivo index.html en tu editor. Luego, agrega el siguiente HTML para proporcionar una estructura base al archivo:
Los elementos contenidos en el elemento <head> definen el nombre de la página con el elemento <title> y dónde cargar la hoja de estilos mediante el elemento <link>. Las etiquetas <meta> definen la codificación de caracteres y dan instrucciones al navegador sobre cómo mostrar el sitio en dispositivos de pantalla pequeña. El contenido principal del formulario residirá dentro de las etiquetas <body> y <main>.
A continuación, dentro del elemento <main>, crea un elemento <form>. Dentro de <form> agregarás varios elementos de formulario y elementos <div> para ayudar con el diseño. En este tutorial, las adiciones al código de pasos anteriores están resaltadas. Agrega el HTML resaltado del siguiente bloque de código a tu archivo index.html:
La estructura del formulario HTML consiste en valores de atributos interconectados para funcionar correctamente. Este código crea un formulario que solicita al usuario su nombre y correo electrónico, pregunta por su compilador CSS favorito y si conoce CSS grid, proporciona un campo para un mensaje generado por el usuario, y tiene una casilla de verificación para inscribir al usuario en un boletín informativo. Para obtener más información sobre cómo estructurar formularios en HTML, consulte la página de documentación de Mozilla Web Docs sobre la estructura de formularios web.
Asegúrate de guardar tus cambios en index.html, luego crea un nuevo archivo en el mismo directorio llamado styles.css.
Abre styles.css en tu editor de texto. Este archivo proporciona los estilos que el navegador aplicará al contenido de index.html. Agrega el siguiente código CSS a tu archivo styles.css:
Los selectores de elementos body y main crean algunos estilos y diseños de texto iniciales para la página en general. El selector de elemento form crea los estilos para el contenedor general del formulario y luego define una cuadrícula CSS que consiste en dos columnas de igual tamaño con grid-template-columns: 1fr 1fr;. Luego, el gap: 2rem proporciona un espaciado de 2rem entre cada fila y columna en la cuadrícula. Por último, el selector de clase .full-width permite que los contenedores con esta clase se extiendan entre las dos columnas en lugar de permanecer en una sola columna.
Guarde sus cambios en styles.css. A continuación, abra un navegador web de su elección. Seleccione el elemento de menú Archivo en el navegador y luego seleccione la opción Abrir. A continuación, navegue hasta la carpeta de su proyecto y cargue su archivo index.html en el navegador. La siguiente imagen muestra cómo se renderizará la página en el navegador:
El formulario se muestra en un cuadro blanco sobre un fondo gris claro. Cada elemento del formulario está disperso en la cuadrícula con los cuatro primeros elementos alternando entre las dos columnas y los últimos tres apilados, abarcando las dos columnas. El estilo predeterminado de los elementos del formulario es como aparecen en Firefox; cada navegador tiene un estilo predeterminado diferente para los elementos del formulario.
En esta sección, configuró el HTML y CSS inicial necesario para trabajar con elementos de formulario. También aprendió que cada navegador maneja el estilo de estos elementos de manera diferente. En la próxima sección, usará la propiedad appearance para igualar el estilo de los elementos del formulario en todos los navegadores.
Restablecimiento del estilo del formulario con la propiedad appearance
Cada navegador maneja el estilo visual de los elementos de formulario de manera diferente. A menudo, el estilo de estos elementos va más allá de las capacidades iniciales de CSS y sigue la estética del sistema operativo o el lenguaje de diseño propio del navegador. Para crear un estilo consistente para todos los navegadores, en esta sección utilizarás la propiedad appearance y otras propiedades para eliminar los estilos predeterminados del navegador.
Para comenzar, abre styles.css en tu editor de texto. Crea un nuevo selector de grupo que consista en button, fieldset, input, legend, select y textarea. Luego, dentro del bloque selector, agrega la propiedad appearance establecida en none, como se destaca en el siguiente bloque de código:
La propiedad appearance es la forma prevista de eliminar el estilo especial de los elementos de formulario. Sin embargo, debido a la antigüedad e implementación de esta propiedad, la mayoría de los navegadores aún requieren un prefijo de proveedor agregado al nombre de la propiedad. Un prefijo de proveedor es una adición codificada especial que se agrega al nombre de la propiedad como un identificador para un navegador específico. Para Chrome, Safari y las versiones recientes de Edge y Opera, ese prefijo es -webkit-. Firefox usa el prefijo -moz-.
Cuando se trabaja con prefijos de proveedores, es importante poner primero las versiones con prefijo del atributo y terminar con la versión sin prefijo. De esta manera, los navegadores antiguos que solo admiten el atributo con prefijo utilizarán el prefijo, pero los navegadores nuevos que admiten tanto el prefijo como las versiones sin prefijo utilizarán la versión estándar sin prefijo. Agrega los atributos appearance resaltados como se muestra en el siguiente bloque de código:
Guarda tus cambios en styles.css y luego abre index.html en tu navegador. Los atributos appearance han eliminado el estilo adornado y han pasado a un estilo más simple, como se muestra en la siguiente imagen:
La propiedad appearance solo te permite cambiar el estilo específico del navegador. El cambio más grande que hizo el valor de la propiedad appearance: none fue eliminar por completo los botones de radio y las casillas de verificación. Para el resto de los elementos del formulario, se necesitan algunos atributos más para eliminar completamente los estilos predeterminados. Los atributos de CSS resaltados en el siguiente bloque de código agregan los estilos necesarios para eliminar los estilos predeterminados:
Este CSS elimina el color de fondo y restablece los parámetros del modelo de caja. No todos estos estilos son necesarios para todos los elementos, pero es aceptable agrupar estos estilos de reinicio en todos los elementos.
Guarda tus cambios en styles.css, luego actualiza index.html en el navegador. Los elementos del formulario han desaparecido visualmente de la página, como se muestra en la siguiente imagen:
En esta sección, utilizaste appearance y propiedades adicionales para eliminar por completo los estilos predeterminados de los elementos del formulario. También utilizaste prefijos de proveedores para aplicar correctamente la propiedad en versiones futuras del navegador. En la próxima sección, comenzarás a personalizar el estilo visual de los campos del formulario.
Establecimiento de Estilos Coherentes en los Campos del Formulario
Ahora que los estilos predeterminados del navegador se han eliminado por completo, aplicarás un estilo personalizado y coherente en todos los elementos del formulario. Esto implicará la creación de varios selectores de grupo que apunten a características específicas del formulario para recibir los estilos apropiados.
Para comenzar, abre styles.css en tu editor de texto. Luego, crea un selector de grupo que consista en input, select y textarea. Agrega los estilos resaltados del siguiente bloque de código:
Estos estilos agregan un borde gris oscuro de 2px alrededor de cada uno de los elementos de entrada de datos, junto con un fondo blanco y esquinas redondeadas.
A continuación, aplicarás estilos para los elementos de entrada de datos que contienen texto. Utilizarás un selector de atributos para especificar qué elementos input dirigir en función del valor de su atributo type. El CSS resaltado en el siguiente bloque de código proporciona los estilos para los elementos necesarios:
Estos estilos aplican un tamaño de fuente y una familia consistentes a todos los elementos. El elemento <textarea>, por ejemplo, no hereda la configuración de fuente del elemento body. Las propiedades display, box-sizing, width y padding proporcionan un diseño y estructura consistentes para cada uno de estos elementos de entrada de datos.
Guarda tus cambios en styles.css y luego abre index.html en tu navegador web. Como se muestra en la siguiente imagen, los campos ahora tienen un borde gris oscuro más grueso alrededor y el texto del elemento <select> ahora es mucho más grande:
A continuación, hay dos elementos que necesitan algún estilo especial además del estilo general que ya has escrito. El primero es dar más altura al textarea, y el segundo es aplicar una flecha de desplegable personalizada al elemento <select>.
Vuelve a styles.css y agrega un selector de elemento textarea. Dentro del bloque del selector, crea una propiedad min-height establecida en un valor de 10rem. Esto creará un área inicial más grande para que el usuario del formulario complete el texto. El CSS resaltado en el siguiente bloque de código ilustra cómo se escribe esto:
Después de agregar los estilos para el textarea, lo siguiente que hay que hacer es crear un directorio de imagen. Esto se puede hacer ejecutando lo siguiente en tu línea de comandos desde el mismo directorio que tus archivos index.html y styles.css:
A continuación, ejecuta el siguiente comando curl para descargar la primera imagen con la que trabajarás en el nuevo directorio images:
La imagen que has descargado es un SVG, que es un lenguaje de marcado similar a HTML con el propósito de dibujar formas.
Para añadir esta nueva imagen al elemento <select>, regresa a styles.css. Luego, crea un selector de elemento select y añade una propiedad background con el valor resaltado del siguiente bloque de código:
Esta propiedad background carga la imagen en el fondo del elemento <select> y no repite la imagen. Luego la centra verticalmente con center y la desplaza desde el lado derecho con right 0.75rem.
Guarda tus cambios en styles.css, luego regresa a tu navegador para refrescar la página. El <textarea> ahora tiene aproximadamente el doble de su altura original y el elemento <select> tiene una flecha azul hacia abajo en el lado derecho. La siguiente imagen ilustra cómo se renderiza esto en el navegador:
A lo largo de esta sección, creaste un estético personalizado para los elementos de entrada de datos del formulario. También creaste un fondo para el elemento <select> para reemplazar la flecha predeterminada. En la siguiente sección, crearás botones de radio y casillas de verificación personalizados y aplicarás estados seleccionados cuando estén marcados.
Personalización de botones de radio y casillas de verificación con la pseudo-clase :checked
Ahora que ha creado la estética base del formulario, es hora de aplicar ese estilo visual a los elementos input interactivos de un botón de radio y una casilla de verificación.
Comience abriendo styles.css en su editor de texto. Cambiará los elementos input con un atributo type de radio o checkbox para tener un valor de altura y anchura iguales. Luego convertirá los botones de radio en círculos. Las porciones resaltadas del siguiente bloque de código muestran cómo se formatea esto:
La propiedad vertical-align está destinada a alinear elementos de texto en línea. Al establecer esto en middle, los campos de entrada se colocarán en el centro de la alineación del texto. Luego, la entrada de radio con una propiedad border-radius de 50% creará un círculo porque la altura y la anchura son iguales.
Guarde los cambios en styles.css y luego abra index.html en su navegador. Los dos botones de radio y la casilla de verificación ahora son más grandes y más visibles como se muestra en la siguiente imagen:
Si interactuaras con los botones de opción o la casilla de verificación, no sucedería nada visible. La propiedad appearance también elimina los indicadores de selección para estos tipos de entrada. A continuación, utilizarás el selector de pseudo-clase :checked para aplicar estilos al elemento de entrada seleccionado.
Vuelve a styles.css y crea un nuevo selector para el botón de opción de entrada con una pseudo-clase :checked. Luego, dentro del bloque del selector, agrega una background-image con un radial-gradient para que se pueda aplicar un estilo relleno a los botones de opción seleccionados. El CSS destacado del siguiente bloque de código muestra cómo se formatea esto:
La función calc() permite que la propiedad transparent se establezca 1px después del valor del color, creando un círculo azul sólido dentro del campo de entrada.
Guarda tus cambios en styles.css y vuelve a index.html en tu navegador. Los botones de opción ahora tienen un círculo azul sólido rodeado de blanco dentro de la entrada. La siguiente imagen muestra el botón de opción Sí seleccionado:
A continuación, la casilla de verificación usará una imagen de fondo para indicar su estado :checked, similar a la flecha del menú desplegable <select>.
Ejecuta el siguiente comando curl para descargar la imagen de la marca de verificación en tu directorio images:
A
A continuación, agregue un selector input[type="checkbox"] con un pseudo-clase :checked adjunto. En el bloque del selector, agregue una propiedad background que cargue la imagen check.svg y la escale para que quepa en el recuadro. El CSS resaltado en el siguiente bloque de código indica cómo se escribe esto:
Los valores de la propiedad background aseguran que la imagen del marca de verificación esté centrada en el contenedor, no se repita y se escale al 75% proporcionalmente.
Guarde los cambios en styles.css y luego actualice la página en el navegador. Cuando seleccione la casilla de verificación Recibir nuestro boletín, ahora aparecerá una marca de verificación en su interior, como se ilustra en la siguiente imagen:
En esta sección, creó botones de radio personalizados y campos de entrada y los ajustó a su estado seleccionado mediante el uso de la pseudo-clase :checked. En la próxima sección, dará estilo a los elementos <label> y <legend> en la página.
Agregando Estilos Especiales a Etiquetas y Leyendas
Los siguientes elementos a estilizar son las etiquetas <label> y las leyendas <legend> en el formulario. Se usarán dos estilos diferentes: un estilo de etiqueta pequeña para los botones de radio y casillas de verificación, y un estilo de etiqueta grande para los demás elementos.
Abre index.html en tu editor de texto. Agregarás un atributo class a cada <label> y <legend> con un valor de large-label o small-label, como se destaca en el siguiente bloque de código:
...
<form>
<div>
<label for="name" class="large-label">Name</label>
<input id="name" type="text" />
</div>
<div>
<label for="email" class="large-label">Email</label>
<input id="email" type="email" />
</div>
<div>
<label for="comp" class="large-label">Favorite CSS Compiler</label>
...
</div>
<div>
<fieldset>
<legend class="large-label">Are you familiar with CSS Grid?</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes" class="small-label">Yes</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no" class="small-label">No</label>
</fieldset>
</div>
<div class="full-width">
<label for="message" class="large-label">Message</label>
<textarea id="message"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter" class="small-label">Receive our newsletter?</label>
</div>
...
</form>
...
Guarda estos cambios en index.html, luego abre styles.css en tu editor de texto.
En styles.css, agrega un selector de clase .large-label y añade las siguientes propiedades como se destaca en el siguiente bloque de código:
Estos estilos establecen que los elementos large-label sean grandes y en negrita con un tamaño de fuente de 1.5rem, equivalente a 24px. Luego, la propiedad margin-bottom proporciona algo de espacio entre la etiqueta y sus contrapartes.
Guarda este cambio en styles.css y abre index.html en tu navegador web. El texto de la etiqueta sobre el campo de entrada de datos será grande y en negrita, como se muestra en la siguiente imagen:
Vuelve a styles.css y crea otro selector de clase para .small-label. Dado que estas son las etiquetas que están a la derecha de un botón de radio o una casilla de verificación, necesitarán algunos estilos de espaciado y tamaño diferentes en comparación con .large-label. Agrega el CSS resaltado a tu styles.css desde el siguiente bloque de código:
El vertical-align: middle desplazará ligeramente el texto. La fuente se establece en 1.25rem, equivalente a 20px, con fuente sans-serif. Las propiedades margin a la izquierda y a la derecha proporcionan espacio entre los campos de entrada y la etiqueta.
Guarda tus actualizaciones en styles.css y actualiza index.html en el navegador. Las etiquetas junto a los botones de radio y las casillas de verificación ahora son más grandes y proporcionan más espacio, como se muestra en la siguiente imagen:
En esta sección, creaste estilos para dos tipos diferentes de etiquetas según su relación con el valor de entrada. Ahora las etiquetas destacan, proporcionando una legibilidad y navegación más fáciles en todo el formulario. En la siguiente sección, proporcionarás ejemplos de formato de datos utilizando el atributo placeholder.
Proporcionando Contenido de Marcador de Posición con el Pseudo-Elemento ::placeholder
El contenido del marcador de posición en un elemento input o textarea proporciona a los usuarios del formulario una demostración visual de qué tipo de información se solicita y cómo formatearla. El atributo placeholder se agrega al HTML con un valor que lo describe. Luego, el pseudo-elemento ::placeholder permite personalizar la apariencia del texto.
Para comenzar a crear contenido de marcador de posición, abre index.html en tu editor de texto. Agrega un atributo placeholder al texto del nombre <input />, al correo electrónico <input />, y a los elementos <textarea>. El HTML resaltado en el siguiente bloque de código indica dónde agregar el placeholder y el valor a usar:
Guarda tus cambios en index.html, luego abre la página en un navegador web. Estas tres áreas de entrada de texto ahora tienen contenido dentro de ellas. Una vez que se seleccionan estos campos de entrada de texto y se agrega contenido, el texto del marcador de posición será eliminado por el navegador. La siguiente imagen ilustra cómo aparecen los estilos de marcador de posición predeterminados en el navegador:
Para estilizar el placeholder, abre styles.css en tu editor de texto. Agrega un selector de grupo para input::placeholder y textarea::placeholder. Asegúrate de usar dos puntos dobles entre el selector y el pseudo-elemento, ya que así es como el navegador reconoce la diferencia entre una pseudo-clase y un pseudo-elemento. El CSS resaltado en el siguiente bloque de código muestra cómo se escribe esto:
Lo único a tener en cuenta es que Firefox requiere que se establezca un valor de opacity en 1 para tener el valor de color completo. De lo contrario, Firefox reduce la opacity, oscureciendo el color del texto y causando problemas de contraste de color accesible según el valor de color. Debido a que esta es una situación exclusiva de Firefox, hay un comentario que explica el propósito de la propiedad opacity.
Guarda tus cambios en styles.css y regresa al navegador para actualizar index.html. El texto de marcador de posición ahora tiene el mismo color azul usado para la flecha desplegable y los estados seleccionados del botón de radio y de la casilla de verificación. La siguiente imagen ilustra cómo el navegador representa el contenido del placeholder:
Con esta sección, creaste contenido de placeholder en campos de entrada de texto y los estilizaste con el uso del pseudo-elemento ::placeholder. En la próxima sección, crearás estilos personalizados para los elementos de formulario <button>.
Creación de Estilos Interactivos para Botones
En formularios web, los elementos <button> a menudo se utilizan para enviar o restablecer un formulario. En index.html, hay dos botones, uno con un type de submit y el otro de reset. Ambos son útiles funcionalmente, pero realizan acciones opuestas. El botón submit enviará el formulario a un procesador, mientras que el botón reset elimina todos los datos ingresados del formulario. Debido a estas acciones diferentes, los elementos <button> necesitan lucir visualmente diferentes también.
Para comenzar, abre styles.css en tu editor de texto y crea un selector de elemento button. En este bloque de selector, agregarás los estilos que son compartidos entre los elementos submit y reset <button>, como se destaca en el siguiente bloque de código:
El font establece que ambos botones tengan el mismo estilo y tamaño de fuente. Luego, el border-radius agrega una esquina redondeada a ambos botones. La propiedad cursor cambia el estilo del cursor para que sea el puntero de estilo mano. Por último, la propiedad padding define el espacio alrededor del interior del botón.
Guarda tus cambios en styles.css y luego abre index.html en tu navegador web. El texto en el botón crecerá y el espaciado entre el texto aumentará visualmente debido al padding. La siguiente imagen muestra cómo se renderizan los botones en el navegador:
A continuación, regresa a styles.css para agregar estilos para cada tipo de botón utilizando un selector de atributo que apunta a cada uno. Para el botón submit, agrega un background-color azul y texto de color blanco. El botón reset obtendrá un subrayado similar a un enlace y un margin para añadir más espacio entre los botones. Agrega el CSS resaltado del siguiente bloque de código a tu archivo styles.css:
Guarda estas adiciones en styles.css y luego actualiza index.html en tu editor de texto. El botón submit ahora es un destacado azul y blanco, mientras que el reset
El elemento <button> no tiene un estado :hover por defecto, así que ahora agregarás esto a tu estilo. Un estado :hover es útil para ayudar a los usuarios de cursor a tener retroalimentación visual de que el cursor está situado sobre los botones.
Para crear estados :hover para estos elementos <button>, regresa a styles.css en tu editor de texto. Establece el backgound-color del botón submit para oscurecerse al pasar el cursor sobre él. Luego, haz que el botón reset elimine la subrayado cuando se pase el cursor sobre él. El HTML resaltado en el siguiente bloque de código indica cómo escribir estos estilos:
Guarda tus cambios en styles.css y luego regresa al navegador para actualizar index.html. Como muestra la siguiente animación, los elementos <button> cambian sus estilos cuando el cursor del mouse se sitúa sobre ellos:
En esta sección, creaste estilos para los elementos <button> para hacer sus diferencias visualmente notables. Cambiaste cómo aparece el cursor al pasar el mouse ajustando la propiedad cursor. También creaste estilos personalizados para aplicar a cada botón y proporcionar más retroalimentación visual. En la última sección, proporcionarás una retroalimentación visual adicional creando estilos cuando un elemento de formulario está siendo usado actualmente con la pseudo-clase :focus.
Aclarando los campos de formulario activos con :focus
Al completar un formulario, es importante que el usuario sepa en qué campo está trabajando actualmente. Puedes lograr esto con el uso de la pseudo-clase :focus. Por defecto, los navegadores emplean una propiedad outline para indicar cuando un elemento tiene :focus, pero a veces puede que no sea un indicador visible, o puede chocar con otros aspectos visuales del diseño. En esta sección, crearás un estado personalizado de :focus que coincida con la estética de tu formulario.
Para empezar a trabajar con los estados :focus de los campos del formulario, abre styles.css en tu editor de texto. Crea un selector de grupo para input, select y textarea, todos con una pseudo-clase :focus, como se resalta en el siguiente bloque de código:
Estos estilos eliminan el valor predeterminado de outline del navegador y lo reemplazan con un trazo azul grueso creado con la propiedad box-shadow. Los primeros tres valores del box-shadow son para la posición y el desenfoque de la sombra. El cuarto se llama expansión, que en este caso crea un trazo de 4px alrededor del elemento enfocado.
A continuación, los botones recibirán un estado de enfoque ligeramente diferente, ya que el botón submit es del mismo color azul. El propósito e intención de un estado de enfoque es llamar la atención de manera notable al elemento enfocado, por lo que distinguirás estos contornos de diferentes maneras.
Agrega un selector button:focus a styles.css. En el bloque del selector, desactiva el valor predeterminado de outline y agrega una propiedad box-shadow. Los valores de posición, difuminado y expansión permanecerán iguales que los campos de entrada, pero el color será negro en lugar de azul, como se destaca en el siguiente bloque de código:
Guarda tus cambios en styles.css y regresa a tu navegador. Actualiza index.html y comienza a presionar la tecla Tab para que el enfoque se desplace entre cada elemento en el formulario. La siguiente animación muestra cómo se aplica el estilo de enfoque a medida que cambia el enfoque con la tecla Tab:
En esta sección, creaste estilos de estado de enfoque que proporcionan una retroalimentación visual clara cuando un elemento de formulario tiene enfoque. Este estilo visual es útil para usuarios de entrada de mouse, táctil y teclado.
Conclusión
Los formularios son un elemento común del diseño web. Permiten a los usuarios interactuar con aplicaciones, buscar contenido y proporcionar retroalimentación. En este tutorial, creaste y estilizaste un formulario completo. Eliminaste los estilos predeterminados del navegador con la propiedad appearance, y creaste una nueva estética personalizada en varios elementos. Utilizaste la pseudo-clase :checked para crear estados seleccionados para botones de radio y casillas de verificación. Luego agregaste contenido de placeholder y emparejaste el estilo con el pseudo-elemento ::placeholder. Después, creaste estilos personalizados para botones y aplicaste estilos de :focus para proporcionar retroalimentación visual valiosa a los usuarios del formulario.
Si deseas leer más tutoriales de CSS, prueba los otros tutoriales en la serie Cómo Estilizar HTML con CSS.
Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css