`<select>` agora pode ser customizado com CSS

• A partir do Chrome 135, começou o suporte a um novo recurso que permite customizar o elemento <select> com CSS, mantendo os padrões de acessibilidade
• Após anos de alinhamento de especificações e desenvolvimento, ele é oferecido como um componente robusto que não quebra nem em navegadores antigos
• Também é possível incluir conteúdo HTML e, com a adição de appearance: base-select, passam a ser possíveis várias customizações, como animações e estilos

Introdução ao appearance: base-select

• A nova propriedade CSS appearance: base-select coloca o elemento <select> em um novo estado customizável

  .custom-select {  
    &, &::picker(select) {  
      appearance: base-select;    
    }  
  }  
  

• Novos recursos ao usar base-select

  • Mudança no comportamento do parser HTML do navegador para o conteúdo interno de <select>
  • Mudança na forma de renderização e na estrutura interna
  • Disponibilização de novas partes internas e estados
  • Fornece um design padrão mínimo (otimizado para customização)
  • A opção exibida aparece na camada superior, como um popover
  • A posição das opções pode ser controlada com anchor()

• Recursos que desaparecem ao usar base-select

  • Não é possível renderizar o <select> fora da janela do navegador
  • A UI nativa de seleção do sistema operacional móvel não é acionada
  • A largura da opção <option> mais longa não é refletida automaticamente

É possível incluir conteúdo HTML em <select>

• Antes, se você inserisse imagens ou SVG dentro de <option>, o navegador ignorava
• Ao aplicar appearance: base-select, o HTML é renderizado como está
• No Chrome, opções com SVG aparecem, mas Safari, Firefox e outros ainda não oferecem suporte
• Demo no CodePen: link prático
• Esse recurso foi introduzido como um experimento Finch e pode ser interrompido se necessário

Customização completa possível

• Todos os componentes de base-select podem ser substituídos, animados e estilizados
• É possível criar uma UI de seleção significativa com vários designs
• Os exemplos incluem indicação de status, opções com avatar, seletor de cores e seleção de status de publicação
• Demo no CodePen: link prático

A interface JavaScript não mudou

• O comportamento JavaScript do <select> existente continua exatamente igual
• Porém, se HTML for inserido em <option>, a forma de analisar o valor selecionado mudou, então é preciso testar
• Se você usa a propriedade value, não é necessário fazer ajustes adicionais

Materiais adicionais

Padrões web

• Especificação Open UI Select
• Pull Request da especificação HTML
• Chrome Intent to Ship

Materiais relacionados ao Chrome

• Post do blog do Chrome com solicitação e explicação
• Resultados do feedback da comunidade
• Usando <hr> em <select>
• Post explicativo da Una / link com resumo das mudanças
• Coleção de CodePens da Una

Materiais da comunidade

• Coleção de CodePens de Brecht De Ruyte
• Comparação da CSS Tricks entre select nativo vs customizado
• Implementação de <select> no Open Props UI
• Exemplo de select customizado com animação

Demos usando <select> customizado

• Demo da Una
• Demo do Brecht
• Demo do Adam

[GN⁺]

Opiniões no Hacker News

• O fato de eu estar desproporcionalmente empolgado com esse recurso provavelmente denuncia meu eu de desenvolvedor web do começo dos anos 2000. É um recurso muito útil, porque o elemento select oferece funcionalidades que não podem ser reproduzidas em HTML

  • Agora só falta adicionarem autocomplete e seletor de tags em seguida

• Até que esse recurso tenha suporte amplo, ele deve ser usado como aprimoramento progressivo. No momento, segundo o caniuse.com, há 46% de suporte global

  • É preciso tomar cuidado para não oferecer uma experiência ruim a usuários de navegadores sem suporte
  • É importante não colocar informações ou funcionalidades essenciais no novo estilo

• Fico muito feliz em ver isso sendo implementado. Vai ser uma melhora muito maior do que substitutos de caixa de seleção customizados

• Fico preocupado com o fato de isso não acionar os componentes nativos do sistema operacional móvel. Os componentes nativos são confiáveis, acessíveis e responsivos

  • É bom poder confiar quando a UI do Android abre. Isso vale não só para o elemento select, mas também para entradas de data/hora

• É melhor não aplicar estilo a alguns controles. No caso das barras de rolagem, elas ficam difíceis de usar quando são finas demais ou têm pouco contraste de cor

  • O elemento select padrão não é o controle mais bonito, mas cumpre sua função

• Parece ser algo que os desenvolvedores web esperam há décadas. Tem potencial para substituir muitas bibliotecas JS

  • Não tenho o Chrome instalado, mas fiquei curioso sobre como eles tratam campos de seleção múltipla no vídeo de exemplo

• Agora é possível customizar elementos select com CSS em navegadores Chromium

  • Os padrões web estão ficando cada vez mais complexos

• Foi fornecido o link para a issue no Firefox

• Se continuar assim, logo teremos paridade de recursos com o VB6

• Melhor do que bibliotecas JS quebradas. Mas a principal preocupação é como o layout se comporta quando há muitas opções

  • Assusta o fato de isso não acionar os componentes nativos do sistema operacional móvel. Fico curioso sobre como o layout se comporta
  • A opção exibida é posicionada com anchor()
  • Ainda é experimental, mas talvez essa seja a melhor parte. Se isso realmente funcionar em CSS, vai ser algo incrível

[carnoxen]

Então o <selectlist> vai deixar de ser necessário?

[deminoth]

Falando de outra coisa, parece que o <select> do título não é exibido no Slackbot haha

[xguru]

Ah, puxa, isso eu vou corrigir mais tarde.