Como personalizar por completo os elementos select com CSS

O ponto central é que a personalização do select agora parte do próprio elemento nativo, sem , , JavaScript e ARIA para simular o componente. Para ativar, basta usar appearance: base-select, que vale para o botão do e para o menu, chamado de 'picker'. Isso entrega um ponto de partida neutro, com uma seta para baixo no botão e o picker posicionado logo abaixo.

A partir daí, o estilo é CSS comum. O ícone troca com ::picker-icon, e a pseudo-classe :open muda o visual com o picker aberto. O menu se estiliza com ::picker(select), as opções com option {}, o checkmark com ::checkmark e a opção marcada com :checked. Também dá para colocar imagens e outras marcações nas opções e exibir o conteúdo no botão com <selectedcontent>. O autor cita suporte no Chrome e navegadores baseados em Chromium, como Edge e Opera, e no Safari 27, mas não no Firefox. Na data da escrita, isso cobriria cerca de 72% do uso global. Em navegadores sem suporte, aparece o padrão, feio talvez, mas utilizável.

Em 16 de junho de 2026, o CEVIU noticiou "Safari 17 traz Customizable Select: controle total do select nativo, mas com uma regra de ouro", sobre a chegada do recurso ao Safari e a possibilidade de personalizar o sem bibliotecas JavaScript ou soluções com . Agora o foco é o passo a passo prático, com appearance: base-select e os pseudo-elementos do picker. Note que a fonte atual fala em Safari 27, enquanto aquela matéria trazia Safari 17, então vale conferir a versão exata na documentação antes de definir requisitos.

Para quem mantém selects feitos com e ARIA, isso aponta para trocar componente próprio por elemento nativo, com fallback embutido. Para quem já estilizava o até onde os navegadores deixavam, a leitura é que o trabalho se resume a reescrever CSS. O risco fica no Firefox, que ainda mostra a versão padrão.