10 snippets de caixa de seleção CSS e JavaScript gratuitos

As caixas de seleção HTML padrão nos serviram bem por décadas. Mas na era moderna, é justo dizer que eles são um pouco… obsoletos.

Os designers podem fazer melhor e, graças aos avanços no CSS, é fácil personalizar as caixas de seleção. Sem mencionar todo o código-fonte aberto disponível gratuitamente online.

Eu selecionei uma coleção das minhas 10 principais escolhas para estilos de caixa selecionados feitos à mão. Eles não são lançados como plug-ins, mas dependem de modelos para personalização de JavaScript e CSS. Mas todos eles são tão fáceis de configurar e até mesmo de reestilizar para seus próprios propósitos.

1. Menu de seleção personalizada

O início da coleção são os estilos de menu de seleção personalizados de Wallace Erick.

Ele usa CSS para reestilização e JavaScript para configurar o UX dos menus. Eles se comportam de maneira um pouco diferente das seleções HTML padrão, e acho que são um pouco mais agradáveis ​​de usar.

Você pode escolher o tamanho e estilo de cor do menu ou trabalhar com os padrões do Wallace. O melhor de tudo é que ele inclui um design de campo de upload personalizado que, se você já tentou reestilizar, saberá que é difícil.

Um excelente lugar para começar, se você quer apenas menus selecionados limpos, mas com aparência fresca, que funcionem.

2. Seleção Simples

Aqui está outra caixa de seleção muito simples que visa misturar mais naturalmente em todos os layouts.

Isso se baseia em cores mais sutis com um esquema de cores preto e branco simples. Mas também usa JavaScript para animar o menu de seleção dentro e fora de vista.

Ele funciona visando um campo de entrada oculto que se comporta exatamente como o campo de seleção. Dessa forma, você ainda pode extrair dados do frontend para seus formulários, porque essa solução tecnicamente não usa o elemento <select> real.

Se a compatibilidade for uma preocupação, pule esta. Mas tenho que admitir que o design é lindo e seria perfeito para o tráfego de desktop.

3. Listas suspensas de HTML sem graça

Como o nome sugere, este pacote de menus selecionados visa apenas não ser uma droga. Todos eles têm estilos e tamanhos variados com botões nos quais você pode clicar para alterar as cores sob demanda.

Obviamente, você pode remover esse recurso em seu próprio layout e manter um esquema que funcione para o seu site. Mas, no geral, esses menus selecionados funcionam como um normal e são lindos de usar.

Se você se preocupa com a compatibilidade, considere trabalhar com este modelo.

A maioria das alterações é cosmética, portanto, não deve afetar muito o comportamento do usuário.

4. Seleção de espaço reservado

O design real deste menu de seleção de espaço reservado é lindo, mas o design não é o único fator aqui.

O desenvolvedor James Nowland criou este menu com o objetivo de remover o padrão da opção de seleção. Isso significa que ele se comporta mais como um espaço reservado em campos de texto onde você o vê quando o campo está em branco, mas depois de definir um valor, ele desaparece.

É totalmente compatível e funciona com o elemento de seleção HTML real. Um campo de opção fica oculto por padrão sempre que o usuário escolhe uma opção. Dessa forma, você nunca verá o texto “selecionar uma opção” em nenhum lugar do menu suspenso. Solução realmente criativa!

5. Projeto Plano

A estética geralmente importa no design da web e esse menu de seleção plano é um ótimo exemplo.

Ele ainda funciona como uma seleção típica e a parte suspensa não foi alterada. Mas apenas o restyling do próprio select anima a página. Parece muito mais elegante do que o padrão feio do navegador.

Você pode até pegar esse modelo e expandi-lo com seus próprios estilos simples aplicados à área suspensa. Totalmente sua chamada!

Mas como modelo inicial, esta é uma das escolhas mais simples para qualquer interface.

6. CSS puro

Sou um grande fã de CSS puro sobre JavaScript porque simplifica todo o processo de design. Isso não é fácil, mas existem tantas soluções por aí.

Um dos meus favoritos é este trecho que apresenta não apenas menus de seleção CSS puros, mas também rádios e caixas de seleção.

Todos eles parecem fenomenais e devem se misturar em qualquer tipo de layout. Você tem controle total para fazer edições no CSS e o melhor de tudo isso deve funcionar em todos os principais navegadores também.

7. Listas suspensas acessíveis com estilo

Aqui está um dos exemplos mais estilizados do que você pode fazer com menus selecionados. Este snippet criado por Andy Fitzsimon conta com JavaScript para o efeito suspenso e usa CSS personalizado para gradientes e ícones de seta.

O legal é que este menu também suporta o recurso no-JS, então funcionará mesmo se o JavaScript estiver desabilitado. É chamado de degradação graciosa e é o melhor amigo de um desenvolvedor web para acessibilidade.

Ainda assim, esses menus selecionados executam os gradientes da web 2.0 da velha escola que podem não se encaixar em um design para 2017 e além.

Mas isso mostra que você pode levar menus selecionados para onde quiser com um pouco de criatividade. E isso pode funcionar surpreendentemente bem se você hackear o CSS para personalizá-los um pouco.

8. Menu de ícones SVG

Os menus de seleção padrão têm o ícone de seta ao lado e não muito mais. Com um pouco de magia SVG, você pode transformar isso em qualquer outro ícone que desejar.

Este menu personalizado tem seu próprio design de ícone positivo rodando com um arquivo SVG puro. Quando você clicar para expandir o menu, ele será animado em um ícone X para fechar/ocultar.

Eu nunca vi nada parecido com isso antes e isso mostra o quão longe chegamos a ultrapassar os limites dos navegadores da web.

Infelizmente, isso não é executado no elemento de seleção HTML nativo. É uma coleção de itens de lista dentro de uma div , portanto, precisaria direcionar um campo de entrada oculto sempre que um valor fosse selecionado.

Felizmente, esse processo é muito fácil, portanto, se você deseja esse design em seu site, não deve dar muito trabalho para fazê-lo funcionar.

9. Selecione o experimento da caixa

Aqui está um projeto experimental que realmente chamou minha atenção. A tela de demonstração de comparação mostra como isso é diferente dos menus de seleção regulares e como isso altera a experiência do usuário.

Quando você toca/clica pela primeira vez para abrir o menu, ele desliza para baixo com efeitos de animação completos. Mas ele não será ocultado a menos que você clique no menu novamente, ao contrário dos menus de seleção típicos que se ocultam quando você clica em qualquer outro lugar da página.

Um bom exemplo de design limpo com animação simples. Mas se você não gosta do recurso de clique para ocultar ausente, este pode ser um problema.

10. Seleções de Escuro e Claro

Se você também gosta de CSS puro e deseja seleções elegantes, confira esta solução e tente usar um deles como modelo inicial.

Ambos contam com gradientes CSS para os planos de fundo e misturam os menus suspensos na cor inferior do gradiente. Isso não usa nenhum plug-in JavaScript, então você pode fazer isso com apenas um pouco de CSS e algum esforço criativo.

Observe que o CSS em si é bastante complicado, por isso ajuda se você conhecer o idioma. Mas, para um ponto de partida, essa é uma das melhores opções que você encontrará e também deixa muito espaço para personalização.