Temas da interface gerada pelo navegador

A maior parte da interface gerada pelo navegador pode ser personalizada até certo ponto usando CSS. Mesmo que exija recursos modernos, ele se degrada de forma otimizada em navegadores mais antigos e, portanto, geralmente não requer um polyfill ou substituto.

Antes de recriar a interface do navegador (controles de formulário, barras de rolagem, seleções, mensagens de erro etc.), verifique se:

1. a interface do navegador não pode ser personalizada o suficiente para suas necessidades, mesmo com CSS moderno;
2. a personalização desejada é suficientemente crítica para justificar as compensações de recriar a interface integrada, principalmente a perda de semântica acessível, processamento de teclado, IME e integração de TA que a interface nativa oferece sem custo financeiro.

Exemplos de personalizações possíveis:

• Use ::selection para personalizar as cores do texto destacado.
• NÃO aplique user-select: none ao texto do conteúdo. Isso interrompe as ferramentas de copiar e colar, de tradução e os gestos de "ler daqui" da TA. Limite-o ao chrome (alças de arrastar, barras de ferramentas, rótulos de botão redundantes).
• Use accent-color para aplicar a cor de destaque da página a qualquer interface gerada pelo navegador.
• Use color-scheme para que a interface do navegador se adapte ao modo claro/escuro.
• Use scrollbar-color para personalizar as cores da barra de rolagem e scrollbar-width para controlar a espessura dela. Mantenha o controle deslizante visivelmente diferente da faixa (≥3:1) e não defina scrollbar-width: none em regiões roláveis (use apenas quando a rolagem for totalmente substituída por outra funcionalidade).
• Use :user-invalid / :user-valid para estilizar a validade, não :invalid / :valid. Eles só correspondem depois que o usuário interage com o campo, evitando o padrão hostil de sinalizar campos obrigatórios vazios como erros no carregamento de página. Exclua os controles deslizantes de intervalo ao segmentar input de forma ampla (por exemplo, input:not(input[type="range"]):user-valid) para que o ajuste de um controle deslizante não aplique bordas ou planos de fundo de validade de campo a ele.
• Os botões e campos de texto (incluindo <textarea>) geralmente podem ser estilizados como elementos normais.
• Use font-size para dimensionar e outras propriedades textuais para controlar a tipografia

Como estilizar campos de texto (<input> e <textarea>)

Para a maioria das finalidades de estilo (por exemplo, cores, bordas, planos de fundo, tipografia etc.), trate esses elementos como contêineres de texto normais.

• Use :placeholder-shown e ::placeholder para estilizar marcadores de posição de entrada.
• Use field-sizing: content para ajustar o tamanho dos campos de texto ao conteúdo.
• Para elementos <textarea>, use resize: vertical para desativar o redimensionamento horizontal ou resize: none para desativar todo o redimensionamento.

Controles de múltipla escolha (seleção, botões de opção, caixas de seleção)

• Para selecionar uma entre várias opções apresentadas em um menu suspenso: use <select> + appearance: base-select + ::picker(select). Para mais informações, consulte Estilo de marca selecionado.
• Selecionar uma ou mais opções entre várias dispostas em linha na página: use um <input type=checkbox> ou <input type=radio> dentro de um <label> para cada opção. Estilo via label:has(:checked).
• Estilize caixas de seleção, botões de opção e interruptores usando appearance: none + conteúdo gerado (::before/::after) ou imagens de plano de fundo para desenhar o estado marcado.

<input>s não textuais (botões, controles deslizantes, entradas de arquivo etc.)

• Entradas de arquivo: use ::file-selector-button para estilizar o botão.
• Não use <input> com um type de button, submit ou reset. Use <button> e estilize-o como um elemento normal.
• Controles deslizantes: use appearance: none + pseudoelementos de miniatura (::-webkit-slider-thumb, ::-moz-range-thumb etc.) e pseudoelementos de faixa (::-webkit-slider-runnable-track, ::-moz-range-track etc.) para um controle mais granular.