Cómo aplicar diseño a controles de formularios

En este módulo, aprenderás a definir el diseño de los controles de formularios y a hacer coincidir los otros estilos de tu sitio.

Ayudar a los usuarios a seleccionar una opción

El elemento <select>

Los estilos predeterminados de un elemento <select> no se ven muy bien y el aspecto no es uniforme en los navegadores.

Primero, cambiemos las flechas. 

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

Para quitar las flechas predeterminadas de un elemento <select>, usa la propiedad appearance de CSS. Para mostrar la flecha que elijas, defínela como un elemento background.

También debes cambiar font-size al menos 1rem (que, para la mayoría de los navegadores, tiene un valor predeterminado de 16 px) para el elemento <select>. De esta manera, evitarás el zoom de la página en Safari para iOS cuando el control de formularios esté enfocado.

Por supuesto, también puedes cambiar los colores de los elementos para que coincidan con los colores de tu marca. Después de agregar algunos estilos más de espaciado, :hover y :focus, la apariencia del elemento <select> ahora es coherente entre los navegadores.

Mira esto en la siguiente demostración de Cómo aplicar un estilo a una selección como si fuera 2019

¿Qué ocurre con el elemento <option>? El elemento <option> es un llamado elemento reemplazado cuya representación está fuera del alcance de CSS. Hasta el momento en que se escribe este documento, no puedes aplicar diseño al elemento <option>.

Casillas de verificación y botones de selección

La apariencia de <input type="checkbox"> y <input type="radio"> varía según el navegador.

Abre la demostración en varios navegadores para ver la diferencia. Veamos cómo asegurarnos de que las casillas de verificación y los botones de selección coincidan con tu marca y se vean iguales en varios navegadores.

Antes, los desarrolladores no podían diseñar los controles <input type="checkbox"> ni <input type="radio"> directamente. Ahora es posible diseñar las casillas de verificación y los botones de selección mediante sus pseudoelementos. También se puede usar la siguiente técnica de reemplazo para crear estilos personalizados para estos elementos.

Primero, oculta visualmente la casilla de verificación predeterminada y el botón de selección.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

Es importante usar position: absolute junto con opacity: 0 en lugar de display: none o visibility: hidden para que los controles solo se oculten visualmente. De esta manera, te aseguras de que todavía estén expuestos por el árbol de accesibilidad del navegador. Ten en cuenta que es posible que se necesite un diseño adicional para garantizar que los controles de formulario visualmente ocultos permanezcan "en la parte superior" de sus elementos de reemplazo. De esta manera, te asegurarás de que se coloque el cursor sobre uno de estos elementos cuando el lector de pantalla esté activado o cuando uses dispositivos táctiles con lectores de pantalla habilitados. Los controles visualmente ocultos serán visibles si se realiza la exploración táctil, y el indicador de enfoque visible del lector de pantalla generalmente aparecerá en la ubicación donde se renderizan los controles en la pantalla.

Para mostrar tus casillas de verificación y botones de selección personalizados, tienes diferentes opciones. Usa el seudoelemento CSS ::before y la propiedad background de CSS, o bien imágenes SVG intercaladas. 

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

Existen muchas posibilidades con CSS para garantizar que las casillas de verificación y los botones de selección coincidan con los estilos de tu marca.

Obtén más información sobre el diseño de <input type="checkbox"> y <input type="radio">, y los estilos de casillas de verificación personalizados.

Cómo usar los colores de tu sitio para los controles de formularios

¿Deseas transformar los estilos de tu sitio para formar controles con una línea de código? Puedes usar la propiedad de CSS accent-color para lograrlo.

checkbox {
  accent-color: orange;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre cómo aplicar diseño a los controles de formularios

¿Cómo se puede quitar el diseño nativo de la plataforma de los controles de formularios?

Uso de revert: all;.
Vuelve a intentarlo.
Uso de appearance: none;.
🎉
Uso de appearance: revert;.
Vuelve a intentarlo.
Uso de revert: appearance;.
Vuelve a intentarlo.

Recursos