Cómo aplicar temas a la IU generada por el navegador

Funciones web: ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid y :user-invalid :placeholder-shown ::placeholder field-sizing resize (propiedad de CSS) <select> personalizable appearance :has() ::file-selector-button

La mayor parte de la IU generada por el navegador se puede personalizar hasta cierto punto con CSS. Incluso si requiere funciones modernas, se degrada de forma correcta en los navegadores más antiguos y, por lo tanto, no suele requerir un polyfill ni un resguardo.

Antes de volver a crear la IU del navegador (controles de formulario, barras de desplazamiento, selecciones, mensajes de error, etc.), primero verifica lo siguiente:

  1. la IU del navegador no se puede personalizar lo suficiente para tus necesidades, incluso con CSS moderno
  2. la personalización deseada es lo suficientemente crítica como para justificar las desventajas de volver a crear la IU integrada, en especial, perder la semántica accesible, el manejo del teclado, el IME y la integración de AT que proporciona la IU nativa de forma gratuita.

Estos son algunos ejemplos de personalizaciones posibles:

  • Usa ::selection para personalizar los colores del texto destacado.
  • NO apliques user-select: none al texto del contenido, ya que se interrumpen las funciones de copiar y pegar, las herramientas de traducción y los gestos de "leer desde aquí" de las TA. Limítalo a los elementos de la interfaz de usuario (controladores de arrastre, barras de herramientas, etiquetas de botones redundantes).
  • Usa accent-color para aplicar el color de los elementos destacados de la página a cualquier IU generada por el navegador.
  • Usa color-scheme para que la IU del navegador se adapte al modo claro o al oscuro.
  • Usa scrollbar-color para personalizar los colores de la barra de desplazamiento y scrollbar-width para controlar su grosor. Mantén el control deslizante visiblemente distinto de la pista (≥3:1) y no configures scrollbar-width: none en las regiones desplazables (úsalo solo cuando el desplazamiento se reemplace por completo por otra affordance).
  • Usa :user-invalid/:user-valid para aplicar diseño de validez, no :invalid/:valid, ya que solo coinciden después de que el usuario interactúa con el campo, lo que evita el comportamiento hostil predeterminado de marcar los campos obligatorios vacíos como errores cuando se carga la página. Excluye los controles deslizantes de rango cuando segmentes para input de forma amplia (p.ej., input:not(input[type="range"]):user-valid) para que, cuando se ajuste un control deslizante, no se apliquen bordes ni fondos de validez de campo.
  • Por lo general, los botones y los campos de texto (incluido <textarea>) se pueden diseñar como elementos normales.
  • Usa font-size para escalar y otras propiedades textuales para controlar la tipografía

Cómo aplicar estilo a los campos de texto (<input> y <textarea>)

Para la mayoría de los propósitos de diseño (p. ej., colores, bordes, fondos, tipografía, etc.), trata estos elementos como contenedores de texto normales.

  • Usa :placeholder-shown y ::placeholder para aplicar diseño a los marcadores de posición de entrada.
  • Usa field-sizing: content para que los campos de texto se ajusten al contenido.
  • Para los elementos <textarea>, usa resize: vertical para inhabilitar el cambio de tamaño horizontal o resize: none para inhabilitar todo el cambio de tamaño.

Controles de opción múltiple (selección, botones de selección, casillas de verificación)

  • Para seleccionar una de las muchas opciones que se presentan en un menú desplegable, usa <select> + appearance: base-select + ::picker(select). Para obtener más información, consulta Diseño de selección de marca.
  • Seleccionar una o más opciones entre varias que se presentan intercaladas en la página: Usa un <input type=checkbox> o un <input type=radio> dentro de un <label> para cada opción. Estilo a través de label:has(:checked).
  • Aplica diseño a las casillas de verificación, los botones de selección y los interruptores con appearance: none + contenido generado (::before/::after) o imágenes de fondo para dibujar el estado marcado.

<input> que no son de texto (botones, controles deslizantes, entradas de archivos, etc.)

  • Entradas de archivos: Usa ::file-selector-button para aplicar diseño al botón.
  • No uses <input> con un type de button, submit o reset. En su lugar, usa <button> y dale estilo como un elemento normal.
  • Controles deslizantes: Usa appearance: none + pseudoelementos de control (::-webkit-slider-thumb, ::-moz-range-thumb, etc.) y pseudoelementos de seguimiento (::-webkit-slider-runnable-track, ::-moz-range-track, etc.) para obtener un control más detallado.