Criar um componente suspenso de seleção personalizado é um dos requisitos mais comuns no desenvolvimento da web. Selecionar lista suspensa permite que o usuário escolha um valor de uma lista predefinida. Talvez você esteja se perguntando:

“Por que preciso criar um componente suspenso de seleção personalizado, se já existe uma tag de seleção HTML? Posso aplicar alguns estilos de CSS e pronto!”

Infelizmente, a lista suspensa de seleção de estilo não é tão simples. O elemento de seleção de HTML nativo não nos permite estilizar tags de opção.

Hoje em dia, as listas suspensas de seleção aparecem em muitas variações diferentes. Você pode encontrar várias bibliotecas javascript e estruturas css , que têm implementação própria para menus suspensos de seleção personalizados. Eles têm funcionalidade comprovada em vários navegadores e são altamente confiáveis. Muitas vezes, você não precisa usar nenhuma biblioteca ou estrutura porque, em muitos casos, criar um menu suspenso de seleção personalizado é fácil tarefa.

Nesta postagem do blog, quero compartilhar com você, como você pode construir uma lista suspensa de seleção funcional sem usar nenhuma biblioteca e estrutura. Você pode aplicar estilos para selecionar opções e adicionar componentes personalizados lá.

Antes de começar a fazer uma lista suspensa de seleção personalizada, você deve perguntar ao seguintes perguntas:

O menu suspenso de seleção terá centenas ou milhares de opções?

Os usuários podem selecionar várias opções?

Em ambos os casos, você precisaria usar um biblioteca de terceiros, porque a própria implementação pode levar muito tempo. Se você precisa de um menu suspenso com centenas de opções, deve fornecer aos usuários um recurso de pesquisa. Se a lista suspensa tiver milhares de opções, você deve usar a técnica de “janela”. Para obter mais informações, marque Lista suspensa de seleção avançada.

Exemplo de lista suspensa de seleção personalizada

Aqui você pode ver o elemento de seleção padrão, que pode parecer um pouco diferente dependendo do navegador que você está usando.

Neste tutorial, transformaremos o elemento de seleção padrão neste:

O HTML

Tradicionalmente, quando você precisa criar uma lista suspensa de seleção personalizada, você deve use a seguinte estrutura.

Como não podemos usar a tag select, temos mais opções para escolher a estrutura html . Podemos usar os elementos ul e li ou div com . Vamos optar pela estrutura div e span.

O CSS

É uma boa ideia comece com uma redefinição de CSS, o que reduz as inconsistências do navegador. Optei pela redefinição do css de Eric Meyer:

Fonte: https://meyerweb.com/eric/tools/css/reset/

Eu prefiro usando o modelo de caixa em que largura = largura do elemento + preenchimento + bordas.

Primeiro, adicionamos alguns estilos básicos para elementos html. <div class=”custom-select”> a posição é relativa, porque precisamos aplicar o posicionamento absoluto para a lista suspensa.

O próximo css é usado para a seta suspensa.

Você pode ver a transição e a transformação das propriedades CSS3. A transição é usada para aumentar e diminuir gradualmente a lista suspensa. Transform é usado para animar a seta, cuja direção representa o estado suspenso.

O JavaScript

Você não precisa usar bibliotecas de terceiros para manipulação dom. Para uma lista suspensa simples, você precisa apenas de eventos javascript básicos.

Adicionamos a função de clique ao wrapper. A função de clique alterna a classe .open, que representa se a lista de opções está aberta ou fechada. Na função de clique, estamos pesquisando <div class=”custom-select”> por this.querySelector(".custom-select"). This dentro da função de clique representa o elemento clicado. Não estamos consultando o documento inteiro document.querySelector(".custom-select") caso tenhamos mais menus suspensos dentro do DOM.

No snippet de javascript acima, estamos iterando todas as opções e adicionando cliques função, que muda a opção selecionada adicionando a classe .selected. Novamente, dentro da função de clique, estamos consultando dentro da opção clicada (this no snippet), caso desejemos alterar os manipuladores de eventos para suportar vários menus suspensos em uma página.

O último snippet é opcional e permite o fechamento da lista suspensa, se o usuário clicar fora da lista suspensa.

Vários menus suspensos de seleção em uma página

Se quisermos usar vários menus suspensos de seleção em uma página página, precisamos anexar o ouvinte de cliques a todos os elementos .custom-select-wrapper e fechar todos os menus suspensos se o usuário clicar em um deles.

Lista suspensa de seleção avançada

Se você precisar de uma lista suspensa de seleção com centenas de opções ou seleção múltipla, você pode verificar algumas das bibliotecas disponíveis. Neste artigo, você pode ver algumas comparações das bibliotecas mais populares.

Caso precise lidar com milhares de opções, você não pode renderizar um DOM com milhares de elementos de opção.Se você não puder usar nenhum back-end, precisará usar a técnica de “janela”.

O que é a técnica de “janela”?

Em vez de renderizar milhares de elementos de uma lista em uma vez, “janelamento” ou virtualização se concentra em renderizar apenas itens visíveis para o usuário. Você pode conferir esta palestra de Brian David Vaughn sobre a implementação da técnica “janelamento”, que é fácil de implementar e pode fornecer enormes ganhos de desempenho. >

Conclusão

Espero que esta postagem do blog ajude você a construir um componente suspenso de seleção personalizado. Em primeiro lugar, você precisa saber se o menu suspenso de seleção contém muitas opções ou se os usuários podem selecionar várias opções. Se você precisa de um componente de seleção básico, a postagem do blog descreve toda a implementação em HTML, CSS e JavaScript. Você pode verificar o código-fonte no Github.