Publicado em: 24 de março de 2025
A partir do Chrome 135, desenvolvedores e designers da Web podem finalmente se unir em um elemento <select> acessível, padronizado e com estilo CSS na Web. Foram muitos anos de trabalho, muitas horas de engenharia e colaboração para chegar a um componente incrivelmente rico e poderoso que não vai quebrar em navegadores mais antigos.
Confira um vídeo de seleções personalizadas usando esses novos recursos:
Se você acompanhou de perto, vai notar que alguns nomes de especificações e recursos mudaram desde o pedido de feedback da comunidade da Una. Felizmente, se você trabalhou com base nessa postagem e quer saber o que mudou, a Una também tem uma solução para você.
Também há uma documentação nova e brilhante no MDN sobre a seleção personalizável, repleta de detalhes.
Conheça o appearance: base-select
Uma nova propriedade CSS appearance: base-select que coloca o elemento <select> em um estado novo, configurável e estilizado, geralmente chamado de estilos "base":
.custom-select {
&, &::picker(select) {
appearance: base-select;
}
}
Usar o base-select desbloqueia vários novos recursos e comportamentos:
- Muda o analisador de HTML do navegador para o conteúdo dentro do
<select>. - Muda os internos renderizados do
<select>. - Expõe novas partes e estados internos para o
<select>. - Um novo visual minimalista, otimizado para personalização.
- As opções mostradas estão na camada superior, como um popover.
- Opções mostradas posicionadas com
anchor().
Usar base-select perde vários recursos e comportamentos:
- O
<select>não é renderizado fora do painel do navegador. - Ele não aciona componentes integrados do sistema operacional móvel.
- O
<select>para de usar a largura do<option>mais longo.
Um <select> agora pode incluir conteúdo HTML avançado
Antes de ser possível personalizar um <select>, se você colocasse itens como uma imagem ou um SVG no elemento <option>, o navegador os ignoraria.
Considere o seguinte HTML. O navegador o leria da forma como você o criou:
<select class="custom-select">
<option>
<svg aria-hidden>…</svg>
<span>HTML</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>CSS</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>JavaScript</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>WASM</span>
</option>
</select>
No entanto, o DOM usado não incluiria o <svg>:
<select class="custom-select">
<option>
<span>HTML</span>
</option>
<option>
<span>CSS</span>
</option>
<option>
<span>JavaScript</span>
</option>
<option>
<span>WASM</span>
</option>
</select>
Aqui estão (da esquerda para a direita) o Chrome, o Safari e o Firefox renderizando o HTML anterior. Se o navegador for compatível com appearance: base-select, o SVG vai aparecer na opção. Caso contrário, não.
Há risco de quebrar sites atuais com a seleção personalizável devido às mudanças no analisador. O Chrome tem os recursos por trás de um experimento do Finch caso haja uma necessidade emergencial de desativá-lo. Se tudo correr bem, o experimento vai terminar e o código será enviado permanentemente para a fonte.
Totalmente personalizável
Todas as partes de um base-select podem ser trocadas, personalizadas e animadas. Confira uma demonstração que usa todos os novos recursos para criar experiências de seleção reconhecíveis e significativas.
Encontre muito mais exemplos na seção de recursos no final desta postagem.
Interfaces JavaScript inalteradas
Não há riscos para suas interações atuais do JavaScript com um elemento <select>.
No entanto, se você começar a adicionar HTML avançado aos elementos <option>, teste os valores selecionados, já que o navegador ainda analisa e ignora imagens e SVG. No entanto, a lógica para determinar a string de conteúdo selecionado mudou. Dependendo do que você tem nas opções, talvez seja necessário fazer ajustes.
Se você estiver usando o atributo value em um <option>, não precisa se preocupar.
Recursos
O Chrome é o primeiro a implementar base-select, mas todos os navegadores participaram das especificações, e ainda há mais elementos "básicos" a serem concluídos. Isso é só o começo.
Vamos continuar adicionando orientações, exemplos e recursos sobre como personalizar elementos selecionados. Até lá, confira os links a seguir para mais informações.
- Padrões da Web
- Chrome
- Comunidade
Agradecemos a todos que participaram desse processo!