Todos podem estar familiarizados com o formulário de lista suspensa selecionada, mas o formulário de lista suspensa padrão geralmente faz com que alguns sites pareçam feios, e é difícil ajustar o estilo da seleção com o CSS. Portanto, muitos sites fabricam formulários suspensos selecionados que estão mais alinhados com o estilo do site e geralmente usam JS para simular esse efeito.
Por exemplo, o Tudou.com, o Taobao Mall e a Amazon são todos os formulários de lista suspensos feitos com JS.
O resultado disso é obviamente unificado visualmente com o estilo geral do site, e o estilo da lista suspensa é muito bonito, mas também traz algumas reações adversas. Como é feito com JS, encontrará muitos efeitos inesperados. Vamos analisar seus respectivos defeitos nos três sites do testador:
A caixa de seleção da categoria de pesquisa para batatas me faz sentir estranha toda vez que clico:
1. Depois de clicar, a lista pop-up é diferente do que você espera. Subconscientemente, era uma lista suspensa, mas a batata me deu uma lista de meio para baixo.
2. Use as teclas para cima/para baixo para escolher habitualmente, mas a página inteira é rolada.
3. Com raiva, eu não precisava mais fechá -lo. Pressione a tecla ESC, mas não há resposta.
4. Depois de desativar o JS, está completamente indisponível.
Da mesma forma, o Taobao Mall também está lindo:
Exceto pelo ponto 1, todo o resto é como batatas, com problemas de acessibilidade e disponibilidade.
A solução é muito simples, basta usar uma caixa de seleção nativa, como a Amazon:
Por que não é incentivado a usar caixas de seleção personalizadas em páginas da web?
A caixa de seleção de seleção é um controle interativo muito maduro. A maturidade significa que os usuários são fáceis de aceitar, mas a maturidade também significa que eles são atenciosos e têm detalhes interativos muito ricos. Por exemplo: Resposta a operações de teclado, como PGUP/PGDN, Home/End e a direção pop-up da lista suspensa, pode ser ajustada automaticamente em diferentes posições, etc.
O uso de JS para simular caixas de seleção requer muito trabalho e testes meticulosos. Mesmo que a empresa esteja disposta a investir, ela ainda não pode implementar alguns recursos de controles nativos. Por exemplo: Na caixa de seleção da Amazon acima, puxei o navegador para um nível muito baixo e a lista suspensa pode ser estendida para fora do navegador.
Para um pouco de sobremesa visual, foram necessários tantos detalhes práticos para fazer a interação perder muito tempo, e demorou muito tempo para o programador front-end, mas foi ingrato, o que foi muito ruim.
PS: Para usar uma caixa de seleção personalizada, as seguintes condições devem ser atendidas:
1. Tão louco quanto o Google, disposto a gastar muito tempo e recursos.
2. Por mais meticuloso que o Google, faça bem e simule completamente.
3. Aplique no aplicativo da web.
Infelizmente, no país, as empresas tão loucas e meticulosas quanto o Google ou o Facebook ainda não apareceram.