Customizable Select: enfim, estilize o <select> de verdade

Ir além do elemento select padrão sempre significou uma de duas trocas ruins: bibliotecas JavaScript pesadas ou montes de elementos div, com a acessibilidade ficando complicada em ambos os casos.¹ Na WWDC 2026, o time do Safari mostrou a saída: customizable select, um conjunto de adições de HTML e CSS que tornam o elemento <select> já existente totalmente estilizável, mantendo a semântica, a navegação por teclado e o 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 então colocar imagens, vídeos ou emojis dentro das suas opções.¹

TL;DR

• O customizable select estiliza o elemento <select> de verdade só com HTML e CSS, substituindo as bibliotecas JavaScript e as pilhas de div que os desenvolvedores usavam antes. A disponibilidade começa no Safari 27 e no Chrome 135.¹
• A adesão é via appearance: base-select, aplicada 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 chegam junto: ::picker-icon reestiliza a seta pela propriedade content e um width, ::checkmark no elemento option troca o check do mesmo jeito, e a pseudoclasse :open estiliza o botão enquanto o menu está aberto.¹
• As opções aceitam qualquer tipo de conteúdo: imagens, vídeos, emojis. A demo da sessão coloca um SVG e um rótulo dentro de cada opção e então organiza todo o menu suspenso como um grid CSS com grid-template e gap.¹
• Colocar um <button> como primeiro filho de <select>, algo antes não permitido no HTML, substitui o botão embutido; o elemento <selectedcontent> dentro dele exibe o conteúdo rico da opção selecionada.²
• O aprimoramento progressivo vem de graça: navegadores sem suporte recorrem ao pop-up nativo, e o elemento select semântico mantém sua acessibilidade embutida em todo lugar.¹

Da sopa de divs de volta ao HTML semântico

Tim, um engenheiro do Safari, aplica appearance: base-select a uma demo de portfólio de fotógrafo a partir de 2:48.

O enquadramento da 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 comportamento sólido com leitores de tela, tudo sem bibliotecas externas.¹ Nas plataformas Apple, a renderização nativa é o conhecido botão suspenso, e ele combina com todos os outros controles da plataforma, o que dá aos usuários uma forma já conhecida de navegar por ele.¹

O problema sempre foi o design. Coloque o controle nativo em um site estilizado e ele parece deslocado; recusa-se a se misturar. Até agora, a solução significava abandonar o elemento por completo em favor de um widget JavaScript ou de uma pilha de divs, e reconstruir a acessibilidade na mão. O customizable select mantém o elemento e entrega a estilização a você, em três etapas que a sessão percorre num build real de portfólio de fotógrafo: o botão, o menu suspenso e, por fim, conteúdo que vai além de texto puro.¹

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

O botão é a parte do select em que você clica para mostrar 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 imediatamente por herança: o site de demo define font-family: Gill Sans no body, e o botão do select agora herda a fonte do body, combinando com o rótulo ao lado.¹ A partir daí, fundo, borda e padding se ajustam como em qualquer outro elemento.

Dois novos ganchos finalizam o botão. A seta ganha seu próprio seletor, ::picker-icon, que recebe uma propriedade content para um glifo substituto e um width para dimensioná-lo. A pseudoclasse :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 que combina com o resto do site em apenas algumas linhas de CSS.¹

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

O menu vem com partes estilizáveis próprias. Você endereça o menu suspenso em si com ::picker(select) no elemento select, e o check 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 a tela limpa pronta, a demo organiza o espaçamento com padding e margin, e então cuida das bordas e de um box-shadow no menu suspenso.¹ Para destacar a escolha atual, usa-se o seletor :checked já existente, em vez de algo novo: a opção marcada em negrito, as demais 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 o check padrão vira qualquer glifo que combine com o seu design.¹

Conteúdo rico nas opções, organizado como grid

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

<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 vazio de propósito, porque, caso contrário, o rótulo “Flowers” seria anunciado duas vezes pelos leitores de tela.¹ Detalhe pequeno, consequência real: opções ricas continuam tão usáveis com tecnologia assistiva quanto as simples.

Com a marca de seleção padrão removida, a demo destaca a opção selecionada pelo seletor checked e por mudanças de cor.¹ Resta um problema: opções de símbolo e rótulo deixam o menu suspenso muito longo. A correção reutiliza CSS que já existe, porque o picker agora é um alvo de estilização comum. Um layout de grid remodela todo o menu:

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 do grid, e o menu suspenso se encaixa em uma grade organizada de categorias.¹ A sessão termina com um floreio no mesmo tema: um seletor de cores radial, construído inteiramente com customizable select.¹

O botão substituível e o selectedcontent

Resta uma lacuna no navegador de categorias: os símbolos SVG vivem nas opções, mas o botão que mostra a seleção atual só exibe texto.¹ O customizable select fecha a lacuna ao deixar você substituir o botão embutido, colocando um elemento <button> como primeiro filho do <select>. Colocar um botão dentro de um select antes não era permitido no HTML; agora ele aceita conteúdo personalizado, como rótulos, ou como o elemento criado exatamente para esse fim.¹

O anúncio do beta do Safari 27 pela WebKit dá nome a esse elemento: <selectedcontent>. Colocado dentro do botão que é o primeiro filho do select, ele exibe o conteúdo da opção atualmente selecionada 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 à opção selecionada, como o SVG ao lado do rótulo “Everything” na demo, de modo que o botão enfim mostra a mesma linguagem visual do menu que ele abre.¹²

O aprimoramento progressivo já vem embutido

O último passo da sessão é aquele que os times pulam por sua conta e risco: checar o design em navegadores sem suporte ao customizable select. A resposta é entediante no melhor sentido. O aprimoramento progressivo entra em ação, o controle continua usável, e os clientes recebem o pop-up nativo.¹ Reutilizar o elemento select significa que a história do fallback já existe, e como <select> é um elemento semântico, os recursos de acessibilidade embutidos sobrevivem em todo navegador.¹

A disponibilidade é concreta: Safari 27 e Chrome 135. Para testar os recursos agora, baixe o Safari Technology Preview ou o Safari Beta.¹ A orientação final da sessão é prática: veja a demo 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 da WebKit para que a interface funcione para todo mundo.¹

Principais conclusões

Para desenvolvedores front-end: - Faça a adesão com appearance: base-select no elemento select para o botão, e de novo em ::picker(select) para o menu suspenso; depois estilize fundo, borda, padding, espaçamento e box-shadow como em qualquer outro elemento.¹ - Troque a seta com ::picker-icon e o check com ::checkmark, ambos via content mais width; estilize o estado aberto com :open; destaque a seleção com o seletor :checked já existente.¹ - Coloque HTML de verdade dentro de <option> (imagens, vídeos, emojis) e remodele o menu com CSS existente, como um grid 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 a navegação por teclado e o suporte a leitores de tela sem bibliotecas externas, tanto em navegadores com suporte quanto sem.¹ - Quando as opções carregam tanto uma imagem quanto um 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 com navegadores sem suporte e com ferramentas assistivas antes de publicar, conforme o próprio checklist da sessão.¹

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

FAQ

O que é customizable select?

O customizable select é 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 elemento <select> já existente totalmente personalizá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 opções, mantendo a acessibilidade embutida do elemento.¹

Como faço a adesão ao customizable select?

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 sua renderização nativa para que você possa estilizá-lo à vontade.¹

Posso colocar imagens ou outro HTML dentro de elementos option?

Sim. A sessão afirma que você pode colocar qualquer tipo de conteúdo dentro das opções: imagens, vídeos, emojis. A demo usa um SVG e um rótulo de texto por opção, com o texto alternativo da imagem vazio para que os leitores de tela anunciem o rótulo apenas uma vez, e organiza 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 opção atualmente selecionada dentro do botão do select. O customizable select permite um <button> como primeiro filho de <select>, o que antes não era permitido no HTML; colocar <selectedcontent> dentro desse botão espelha o conteúdo da opção selecionada, como um SVG ao lado de seu rótulo, e o elemento pode ser estilizado diretamente.¹²

O que acontece em navegadores sem suporte ao customizable select?

O controle degrada com elegância. O aprimoramento progressivo significa que o select continua totalmente usável e os clientes recebem 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 customizable select apaga uma dependência do mesmo jeito que o CSS Grid Lanes faz com layouts masonry, e a dupla é proposital: a própria sessão 315 encerra apontando os espectadores para a sessão de Grid Lanes, e o site de demo usa os dois recursos juntos.¹ A Apple segue ampliando o que elementos HTML simples podem fazer, a mesma trajetória abordada em o elemento HTML model nas plataformas Apple, e cada biblioteca de menu suspenso que você deixa de entregar reforça o argumento do manifesto no-build. O hub completo da série é a Apple Ecosystem Series.

Referências