Cómo aplicar diseño a controles de formularios

En este módulo, aprenderás a aplicar ajustes de estilo a los controles de formulario y a hacer coincidir los estilos de tus otros sitios.

Ayuda 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 coherente entre 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>, haz lo siguiente: usa la propiedad appearance del CSS. Para mostrar la flecha que elijas, defínela como una background.

También debes cambiar font-size a 1rem, como mínimo. (que en la mayoría de los navegadores tiene un valor predeterminado de 16 px) para el elemento <select>. Esta acción impedirá el zoom de la página en Safari de iOS cuando el control de formularios esté enfocado.

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

Puedes ver esto en la siguiente demostración Cómo diseñar una selección como si fuera 2019

¿Qué ocurre con el elemento <option>? El elemento <option> es un elemento reemplazado cuya representación está fuera del alcance de CSS. En 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 tengan el mismo aspecto en todos los navegadores.

En el pasado, los desarrolladores no podían diseñar los controles <input type="checkbox"> y <input type="radio"> directamente. Ahora se pueden diseñar las casillas de verificación y los botones de selección a través de sus seudoelementos. También puedes usar la siguiente técnica de reemplazo para crear estilos personalizados para estos elementos.

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

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 queden ocultos visualmente. Esto garantizará que la sección del navegador aún las exponga árbol de accesibilidad. Ten en cuenta que tal vez necesites más estilos para garantizar que los elementos los controles del formulario permanezcan “en la parte superior” de sus elementos de reemplazo. Esto te ayudará a garantizar que si colocas el cursor sobre uno de estos cuando un lector de pantalla está activado o cuando se utilizan dispositivos táctiles con lectores de pantalla habilitados, los controles visualmente ocultos será detectable si se explora de forma táctil, y el indicador de enfoque visible del lector de pantalla generalmente aparecerá en la ubicación de los controles se renderizan en la pantalla.

Para mostrar las casillas de verificación y los 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 diseño de <input type="checkbox"> y <input type="radio"> y estilos de casillas de verificación personalizados.

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

¿Deseas combinar los estilos de tu sitio para crear controles con una línea de código? Para ello, puedes usar la propiedad de CSS accent-color.

checkbox {
  accent-color: orange;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el diseño de los controles de formularios

¿Cómo puedes quitar el estilo nativo de la plataforma de los controles de formularios?

Usa revert: all;.
Vuelve a intentarlo.
Usa appearance: none;.
🎉
Usa appearance: revert;.
Vuelve a intentarlo.
Usa revert: appearance;.
Vuelve a intentarlo.

Recursos