Como personalizar por completo os elementos select com CSS

A fonte descreve a abordagem que ficou para estilizar o select nativo. Em vez do antigo <selectmenu>, que exigiria trocar os elementos existentes e decidir o que mostrar em navegadores sem suporte, o recurso se apoia no próprio <select>. Quem já estilizava o controle até onde os navegadores permitiam só precisa reescrever o CSS.

O ponto de partida é appearance: base-select, que vale para o botão e para o menu suspenso, chamado de picker. Dali, o ::picker-icon troca o chevron, a pseudo-classe :open muda o ícone com o picker aberto e o ::picker(select) estiliza o menu (dá para usar margin-top e animações). As opções recebem estilo com option {}, o ::checkmark mira o ícone de marcação e o :checked destaca a opção escolhida. Com <selectedcontent>, conteúdo mais rico das opções aparece também no botão.

O suporte cobre Chrome e navegadores baseados em Chromium, como Edge e Opera, além do Safari 27. O Firefox ainda não tem. Segundo a fonte, na data da redação isso representa cerca de 72% do uso global. Quem não suporta mostra o select padrão, feio talvez, mas usá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. A fonte atual trata o recurso como disponível no Safari 27 e o mostra na prática, com o passo a passo em CSS. Há divergência entre a numeração do Safari nas duas matérias, e a fonte atual cita Safari 27. Em 26 de outubro de 2026, o CEVIU já havia publicado matéria com o mesmo título desta.

Para quem mantém selects feitos com div, span, JavaScript e ARIA, a leitura é que dá para planejar a troca por um componente nativo com fallback embutido. Para quem só estilizava o select até o limite antigo, o custo parece ser reescrever CSS. Como o fallback é utilizável, o recurso pode ser adotado sem esperar o Firefox.