Estilizando Elementos Select com CSS Moderno

O elemento <select> sempre foi um dos controles de formulário mais resistentes à estilização. Ao contrário de inputs ou botões, ele historicamente era renderizado usando componentes de UI do sistema operacional, o que significa que o CSS só conseguia tocar a superfície. Essa limitação levou desenvolvedores a adotarem soluções alternativas que ainda são comuns em código de produção hoje.

Este artigo cobre ambas as abordagens: a técnica legada amplamente suportada usando appearance: none, e o modelo mais recente appearance: base-select que está emergindo atualmente nos navegadores Chromium modernos.

Por Que Elementos <select> Nativos Resistem à Estilização CSS

Navegadores tradicionalmente delegavam a renderização do <select> ao sistema operacional. O resultado era dimensionamento de caixa inconsistente, renderização de fonte e estilos de seta dropdown variados entre Chrome, Firefox, Safari e Edge, sem uma maneira confiável de unificá-los apenas através de CSS.

A lista dropdown aberta (o painel de opções) permanece amplamente não estilizável na maioria dos navegadores até hoje. Essa é uma restrição importante que vale a pena ter em mente antes de escolher sua abordagem.

A Abordagem Legada: appearance: none com um Elemento Wrapper

A técnica de estilização CSS mais amplamente suportada para elementos select envolve três passos:

1. Remover a aparência nativa com appearance: none.
2. Envolver o <select> em um elemento container que você pode estilizar livremente.
3. Adicionar uma seta dropdown personalizada usando clip-path ou um SVG de background.

:root {
  --select-border: #777;
  --select-arrow: var(--select-border);
}

select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  background-color: #fff;
}

select,
.select::after {
  grid-area: select;
}

.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
  pointer-events: none;
}

O truque de sobreposição com CSS grid aqui vale a pena entender: atribuir tanto o <select> quanto o pseudo-elemento ::after à mesma área de grid nomeada os empilha, permitindo que a seta personalizada fique visualmente por cima sem quebrar o comportamento de clique do controle nativo.

Para estados de foco, já que outline no select nativo não se comporta de forma confiável entre navegadores, uma correção comum é adicionar um elemento irmão <span class="focus"> e direcioná-lo com select:focus + .focus usando position: absolute para desenhar um anel de foco visível.

Esta abordagem funciona em todos os navegadores modernos e preserva a acessibilidade nativa — navegação por teclado, anúncios de leitores de tela e envio de formulário se comportam conforme esperado.

A Abordagem Moderna: appearance: base-select

Chrome 135 e Edge 135 introduziram um novo modelo opt-in que expõe partes internas do <select> para estilização CSS direta. Você o ativa assim:

select,
select::picker(select) {
  appearance: base-select;
}

Isso desbloqueia vários novos alvos de estilização:

• ::picker(select) — o painel dropdown contendo opções
• ::picker-icon — o indicador de seta dropdown
• option::checkmark — a marca de seleção mostrada ao lado da opção selecionada
• :open — uma pseudo-classe ativa enquanto o picker está aberto
• option:checked — direciona a opção atualmente selecionada

Com base-select, você pode estilizar o dropdown picker diretamente, animá-lo abrindo e fechando, e usar o elemento <selectedcontent> para espelhar o conteúdo da opção selecionada no controle fechado. Navegadores que suportam também permitem marcação mais rica dentro das opções quando o modelo de select customizável está habilitado.

Suporte de navegadores: atualmente limitado principalmente a navegadores baseados em Chromium. Verifique o status atual no Can I Use.

Use @supports para aplicá-lo como um aprimoramento progressivo:

@supports (appearance: base-select) {
  select,
  select::picker(select) {
    appearance: base-select;
  }
}

Qual Abordagem Você Deve Usar?

Use a técnica wrapper com appearance: none como sua base. Ela funciona em todos os lugares, preserva acessibilidade e dá a você controle sólido sobre o estado fechado do select. Aplique appearance: base-select por cima com @supports para navegadores que o suportam.

Conclusão

Customizar dropdowns de select HTML com CSS não é mais uma escolha entre “controle total com JavaScript” ou “aceitar os padrões do navegador”. O padrão wrapper com appearance: none permanece como a fundação cross-browser confiável, enquanto appearance: base-select abre a porta para estilizar o painel dropdown, incorporar conteúdo mais rico em opções e animar o picker. A lacuna entre esses dois extremos está se fechando, apenas não uniformemente em todos os navegadores ainda. Comece com a técnica legada, aplique progressivamente a moderna, e você cobrirá a mais ampla gama de usuários com o mínimo de atrito.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..