0Pricing
HTML Academy · Aula

O elemento selectlist

Personalize controles suspensos com o elemento selectlist proposto.

O elemento selectlist é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

A Limitação de Longa Data

O elemento <select> é um dos poucos controles de formulário cuja aparência não pode ser estilizada. Toda regra CSS aplicada a ele, como bordas personalizadas, fontes e estilos das opções, é ignorada pelo navegador, o que levou à criação de milhares de bibliotecas de listas suspensas personalizadas que duplicam o comportamento nativo apenas para obter opções estilizadas.

O Que É a Lista de Seleção

<selectlist>, também encontrado como <selectmenu>, é um elemento HTML nativo criado como substituto estilizável de <select>. Ele aceita o mesmo modelo conceitual — um acionador em forma de botão e uma lista de opções — mas todas as partes ficam expostas para personalização com CSS.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Partes que Você Pode Estilizar

A lista de seleção expõe o botão, que é o acionador no estado fechado, a caixa de listagem, que é a lista suspensa aberta, e as opções. Pseudoelementos CSS (::part(button), ::part(listbox)) permitem estilizar cada parte sem afetar o comportamento nativo.

Personalizando as Opções

As opções dentro da lista de seleção podem conter conteúdo arbitrário — ícones, descrições e layouts personalizados —, não apenas texto. O navegador continua gerenciando a lógica de seleção, a navegação pelo teclado e o gerenciamento do foco, enquanto você controla livremente a aparência.

Comportamentos Nativos Mantidos

A lista de seleção mantém tudo o que <select> faz bem: navegação pelo teclado, com setas e busca ao digitar, anúncios para leitores de tela, participação em formulários e gerenciamento do foco. Você herda o comportamento acessível e pode estilizar a interface por cima dele.

Botão Personalizado

Forneça um ponto de inserção para o acionador: <button slot="button">Choose fruit <svg>...</svg></button>. O botão é seu para projetar — substitua o triângulo nativo por um ícone personalizado, adicione rótulos e altere as cores. O navegador continua gerenciando a abertura e o fechamento.

Participação em Formulários

A lista de seleção participa do envio de formulários assim como o elemento de seleção: tem um atributo de nome, um valor e é enviada com o formulário. O tratamento no lado do servidor é idêntico. É uma substituição direta, no nível da marcação, para a maioria dos casos de uso do elemento de seleção.

Suporte dos Navegadores

A lista de seleção é um recurso em estágio inicial. Em 2026, ela está disponível em navegadores baseados no Chromium por trás de sinalizadores ou de forma limitada. Firefox e Safari ainda não oferecem suporte. O uso em produção exige uma alternativa com um <select> comum para navegadores sem suporte.

Dificuldade da Compatibilidade

Criar uma solução de compatibilidade para uma lista suspensa personalizada totalmente acessível e compatível com o comportamento nativo é difícil — confinamento do foco, navegação pelo teclado, integração com leitores de tela e participação em formulários. Bibliotecas como Downshift, Combobox e react-aria realizam esse trabalho usando milhares de linhas de código. A lista de seleção substitui tudo isso por um único elemento.

Quando Adotar

Para aplicativos internos ou implantações exclusivas do Chromium, a lista de seleção permite economizar bastante código atualmente. Para sites públicos voltados a um público amplo, aguarde o suporte do Firefox e do Safari ou use uma biblioteca de encapsulamento que utilize a lista de seleção onde houver suporte e recorra a uma lista suspensa personalizada em React/Vue nos demais casos.

Roteiro de Substituição

Assim que a lista de seleção estiver disponível em todos os lugares, espere que muitas bibliotecas de listas suspensas personalizadas sejam descontinuadas ou se tornem apenas encapsulamentos finos do elemento nativo. Acompanhe o processo de padronização; a API passou por revisões e pode continuar evoluindo antes da padronização final.

Implicações para o Design

Agora, os designers podem especificar listas suspensas com precisão de pixel, sem ressalvas como "Este é o design, mas a lista suspensa terá uma aparência diferente no navegador". A lista de seleção elimina uma das inconsistências visuais mais antigas entre as maquetes de design e o HTML publicado.

Verificação de Conhecimento

Por que o elemento de lista de seleção é importante — qual limitação do