Select customizável: finalmente dá para estilizar o <select> de verdade

Ir além do elemento select padrão sempre significou escolher entre duas alternativas ruins: bibliotecas JavaScript pesadas ou um monte de elementos div — e, dos dois lados, a acessibilidade complica.¹ Na WWDC 2026, o time do Safari mostrou a saída: o select customizável, um conjunto de adições ao HTML e ao CSS que torna o já existente elemento <select> totalmente estilizável sem abrir mão da semântica, da navegação por teclado e do suporte a leitores de tela que ele já oferece. A partir do Safari 27 e do Chrome 135, você pode reestilizar o botão, o menu suspenso, a marca de seleção e até a seta, e depois colocar imagens, vídeos ou emojis dentro das suas options.¹

Resumo

• O select customizável estiliza o elemento <select> de verdade apenas com HTML e CSS, substituindo as bibliotecas JavaScript e as pilhas de div a que os desenvolvedores recorriam antes. A disponibilidade começa no Safari 27 e no Chrome 135.¹
• A ativação é feita com appearance: base-select, aplicado duas vezes: uma no próprio select, para liberar a estilização do botão, e outra em ::picker(select), para abrir mão do menu suspenso nativo.¹
• Novas partes estilizáveis vêm junto: ::picker-icon reestiliza a seta pela propriedade content e por um width, ::checkmark no elemento option troca a marca de seleção do mesmo jeito, e a pseudo-classe :open estiliza o botão enquanto o menu está aberto.¹
• As options aceitam qualquer tipo de conteúdo: imagens, vídeos, emojis. A demonstração da sessão coloca um SVG e um rótulo dentro de cada option e depois distribui o menu suspenso inteiro como um grid CSS, com grid-template e gap.¹
• Colocar um <button> como primeiro filho de <select>, o que antes não era permitido em HTML, substitui o botão embutido; o elemento <selectedcontent> dentro dele exibe o conteúdo rico da option selecionada.²
• O aprimoramento progressivo vem de graça: navegadores sem suporte caem no pop-up nativo, e o elemento select semântico mantém a acessibilidade embutida em qualquer lugar.¹

Da sopa de divs de volta ao HTML semântico

Tim, engenheiro do Safari, aplica appearance: base-select a uma demonstração de portfólio de fotografia a partir de 2:48.

A sessão parte do que o <select> já faz bem. O elemento entrega acessibilidade básica de imediato: navegação por teclado entre os elementos option e um comportamento sólido com leitores de tela, tudo sem bibliotecas externas.¹ Nas plataformas da Apple, a renderização nativa é o familiar pull down button, que combina com todos os outros controles do sistema e dá ao usuário uma forma já conhecida de navegar.¹

O problema sempre foi o design. Jogue o controle nativo dentro de um site estilizado e ele destoa; simplesmente não se integra. Até agora, a solução passava por abandonar o elemento de vez em favor de um widget JavaScript ou de uma pilha de divs, e reconstruir a acessibilidade na mão. O select customizável mantém o elemento e entrega a estilização para você, em três etapas que a sessão percorre em cima de um portfólio de fotografia real: o botão, o menu suspenso e, por fim, conteúdo que vai além do texto puro.¹

Estilizando o botão: base-select, ::picker-icon e :open

O botão é a parte do select em que você clica para exibir o menu, e o primeiro passo é uma única declaração:

select {
  appearance: base-select;
}

appearance: base-select troca a renderização nativa por um conjunto menor de estilos-base que você pode alterar.¹ O efeito aparece na hora, por herança: o site de demonstração define font-family: Gill Sans no body, e o botão do select passa a herdar a fonte do body, ficando igual ao rótulo ao lado.¹ Daí em diante, background, border e padding se ajustam como em qualquer outro elemento.

Dois novos ganchos fecham o botão. A seta ganha um seletor próprio, ::picker-icon, que aceita uma propriedade content para o glifo substituto e um width para dimensioná-lo. A pseudo-classe :open estiliza o botão de forma diferente enquanto o menu suspenso está aberto:

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

O veredito da sessão sobre o resultado: um select combinando com o restante do site em poucas linhas de CSS.¹

Estilizando o menu suspenso: ::picker(select) e ::checkmark

O menu traz partes estilizáveis próprias. Você endereça o menu suspenso em si com ::picker(select) no elemento select, e a marca de seleção com ::checkmark no elemento option.¹ Abrir mão do menu nativo exige appearance: base-select uma segunda vez, agora no picker:

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

Com o terreno limpo, a demonstração organiza o espaçamento com padding e margin, e em seguida cuida das bordas e de um box-shadow no menu suspenso.¹ Para destacar a escolha atual, entra o seletor :checked, que já existia, em vez de qualquer novidade: a option marcada fica em negrito, as outras ficam em cinza.¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmark funciona exatamente como ::picker-icon: defina content e um width, e a marca de seleção padrão vira o glifo que combinar com o seu design.¹

Conteúdo rico nas options, distribuído como um grid

A mudança maior é o que vai dentro do <option>. A sessão é explícita: qualquer tipo de conteúdo funciona — imagens, vídeos, emojis, o que você quiser.¹ A demonstração monta um explorador de categorias com os assuntos mais populares do fotógrafo, colocando um símbolo SVG e um rótulo dentro de cada option:

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

Repare no alt vazio. Tim deixa o texto alternativo da imagem em branco de propósito, porque senão o rótulo “Flowers” seria anunciado duas vezes nos leitores de tela.¹ Detalhe pequeno, consequência real: options com conteúdo rico continuam tão utilizáveis com tecnologia assistiva quanto as simples.

Sem a marca de seleção padrão, a demonstração destaca a option selecionada pelo seletor :checked e por mudanças de cor.¹ Resta um problema: options com símbolo e rótulo deixam o menu suspenso comprido demais. A correção reaproveita CSS que já existe, porque agora o picker é um alvo comum de estilização. Um layout em grid remodela o menu inteiro:

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-template define o número de linhas e colunas, enquanto gap define o espaçamento entre as células, e o menu suspenso se encaixa num grid organizado de categorias.¹ A sessão termina com um floreio sobre o mesmo tema: um seletor de cores radial, construído inteiramente com select customizável.¹

O botão substituível e o selectedcontent

Falta uma peça no explorador de categorias: os símbolos SVG vivem nas options, mas o botão que mostra a seleção atual exibe apenas texto.¹ O select customizável resolve isso permitindo que você substitua o botão embutido, colocando um elemento <button> como primeiro filho do <select>. Colocar um botão dentro de um select não era permitido em HTML até então; agora ele aceita conteúdo customizado, como rótulos, ou como o elemento criado exatamente para essa função.¹

O anúncio do beta do Safari 27 no WebKit dá nome a esse elemento: <selectedcontent>. Colocado dentro do botão que é primeiro filho do select, ele exibe o conteúdo da option selecionada no momento e pode ser estilizado diretamente.²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

O elemento espelha qualquer conteúdo rico que pertença à option selecionada — como o SVG ao lado do rótulo “Everything” na demonstração —, de modo que o botão finalmente fala a mesma linguagem visual do menu que ele abre.¹²

O aprimoramento progressivo já vem embutido

A última etapa da sessão é aquela que os times pulam por conta e risco: conferir o design em navegadores sem suporte ao select customizável. A resposta é do melhor tipo possível — sem graça. O aprimoramento progressivo entra em ação, o controle continua utilizável e o cliente recebe o pop-up nativo.¹ Reaproveitar o elemento select significa que a história do fallback já está pronta, e como <select> é um elemento semântico, os recursos de acessibilidade embutidos sobrevivem em qualquer navegador.¹

A disponibilidade é concreta: Safari 27 e Chrome 135. Para testar os recursos agora, baixe o Safari Technology Preview ou o Safari Beta.¹ A recomendação final da sessão é prática: veja a demonstração no webkit.org, estilize algo simples no seu próprio site, teste em navegadores sem suporte e com ferramentas assistivas, e leia o material de boas práticas do WebKit para que a interface funcione para todo mundo.¹

O que o time do Safari acrescentou nos labs

Alguns pontos dos labs da WWDC completam o quadro, principalmente sobre para onde o select customizável está indo.

O item do roadmap a acompanhar é appearance: base, a mesma ativação, agora generalizada para todos os controles de formulário, não só o <select>. O valor existe na especificação do CSS, mas ainda não foi lançado em lugar nenhum.³ No lab, o painel disse que ele “não está sendo lançado agora” e viria depois, e que a discussão na especificação segue abertamente indefinida — os participantes discordaram ao vivo sobre qual deveria ser a aparência do base sem estilização.⁴ Os objetivos de design declarados são claros o bastante: herdar ao máximo dos estilos da página, nada de mágica de layout, e renderização base idêntica e estrutura de DOM idêntica entre os motores dos navegadores.⁴

O histórico explica por que o select customizável reaproveita o <select>. A proposta original era um elemento totalmente novo, <selectmenu>. Um engenheiro de padrões do WebKit defendeu reaproveitar o <select> no lugar, para que navegadores sem suporte mantivessem o fallback nativo de graça — exatamente a história de aprimoramento progressivo descrita acima.⁴

Uma regra inegociável saiu do painel: sempre mantenha conteúdo de texto nas suas options. Options só com ícone renderizam um pop-up nativo em branco em navegadores sem suporte, o que deixa esses usuários na mão.⁴

Pontos principais

Para desenvolvedores frontend: - Ative com appearance: base-select no elemento select para o botão, e de novo em ::picker(select) para o menu suspenso; depois estilize background, border, padding, espaçamento e box-shadow como em qualquer outro elemento.¹ - Troque a seta com ::picker-icon e a marca de seleção com ::checkmark, ambas via content mais width; estilize o estado aberto com :open; destaque a seleção com o seletor :checked, que já existia.¹ - Coloque HTML de verdade dentro do <option> (imagens, vídeos, emojis) e remodele o menu com CSS já existente, como um grid feito de grid-template mais gap; substitua o botão embutido por um <button> primeiro filho contendo <selectedcontent>.¹²

Para times atentos à acessibilidade: - O select semântico mantém navegação por teclado e suporte a leitores de tela sem bibliotecas externas, tanto em navegadores compatíveis quanto nos incompatíveis.¹ - Quando a option tiver imagem e rótulo de texto, deixe o texto alternativo da imagem vazio para que os leitores de tela não anunciem o rótulo duas vezes.¹ - Teste em navegadores sem suporte e com ferramentas assistivas antes de publicar, seguindo o próprio checklist da sessão.¹

Para líderes técnicos planejando a adoção: - Trate o select customizável como um aprimoramento progressivo: Safari 27 e Chrome 135 recebem o design customizado, todos os outros recebem o pop-up nativo, e nenhum fallback em JavaScript é necessário.¹ - Avalie o recurso agora no Safari Technology Preview ou no Safari Beta, e compare com a biblioteca de menu suspenso que hoje ocupa espaço no seu bundle.¹

Perguntas frequentes

O que é o select customizável?

O select customizável é um conjunto de capacidades de HTML e CSS, apresentado pelo time do Safari na WWDC 2026 e disponível a partir do Safari 27 e do Chrome 135, que torna o já existente elemento <select> totalmente customizável. Você estiliza o botão, o menu suspenso, a seta e a marca de seleção com CSS, e coloca conteúdo rico dentro das options, sem perder a acessibilidade embutida do elemento.¹

Como faço para ativar o select customizável?

Aplique appearance: base-select em dois lugares: no próprio elemento select, o que substitui a renderização nativa do botão por um conjunto menor de estilos-base, e em ::picker(select), o que faz o menu suspenso abrir mão da renderização nativa para que você possa estilizá-lo livremente.¹

Posso colocar imagens ou outro HTML dentro dos elementos option?

Sim. A sessão afirma que você pode colocar qualquer tipo de conteúdo dentro das options: imagens, vídeos, emojis. A demonstração usa um SVG e um rótulo de texto por option, com o texto alternativo da imagem vazio para que os leitores de tela anunciem o rótulo apenas uma vez, e distribui o menu como um grid CSS usando grid-template e gap.¹

O que é o elemento selectedcontent?

<selectedcontent> é o elemento que exibe o conteúdo rico da option selecionada no momento dentro do botão do select. O select customizável permite um <button> como primeiro filho de <select>, algo que não era permitido em HTML até então; colocar <selectedcontent> dentro desse botão espelha o conteúdo da option selecionada, como um SVG ao lado do seu rótulo, e o elemento pode ser estilizado diretamente.¹²

O que acontece em navegadores que não suportam o select customizável?

O controle degrada com elegância. O aprimoramento progressivo faz com que o select continue plenamente utilizável e o cliente receba o pop-up nativo; e como <select> é um elemento semântico, os recursos de acessibilidade embutidos permanecem. A sessão recomenda testar em navegadores sem suporte e com ferramentas assistivas antes de publicar.¹

O select customizável elimina uma dependência do mesmo jeito que as faixas do Grid no CSS fazem com layouts masonry, e a dupla não é acidental: a própria sessão 315 se encerra apontando os espectadores para a sessão sobre as faixas do Grid, e o site de demonstração usa os dois recursos juntos.¹ A Apple continua ampliando o que elementos HTML comuns conseguem fazer — a mesma trajetória tratada em o elemento model do HTML nas plataformas da Apple —, e cada biblioteca de menu suspenso que você deixa de embarcar reforça o argumento do manifesto no-build. O hub completo da série é a Série Ecossistema Apple.

Referências