10 extraits de boîte de sélection CSS et JavaScript gratuits

Les boîtes de sélection HTML par défaut nous ont bien servi pendant des décennies. Mais à l'ère moderne, il est juste de dire qu'ils sont un peu… périmés.

Les concepteurs peuvent faire mieux et grâce aux progrès du CSS, il est facile de personnaliser les cases de sélection. Sans oublier tout le code open source disponible gratuitement en ligne.

J'ai organisé une collection de mes 10 meilleurs choix pour les styles de boîtes sélectionnés à la main. Ceux-ci ne sont pas publiés en tant que plugins mais s'appuient plutôt sur des modèles pour la personnalisation JavaScript et CSS. Mais ils sont tous aussi faciles à configurer et même à relooker à vos propres fins.

1. Menu de sélection personnalisé

Le coup d'envoi de la collection est les styles de menu de sélection personnalisés de Wallace Erick.

Il utilise à la fois CSS pour le restylage et JavaScript pour configurer l'UX des menus. Ils se comportent légèrement différemment des sélections HTML standard, et je pense qu'ils sont un peu plus agréables à utiliser.

Vous pouvez choisir la taille et le style de couleur du menu ou travailler avec les valeurs par défaut de Wallace. Mieux encore, il inclut une conception de champ de téléchargement personnalisée qui, si vous avez déjà essayé de relooker, vous saurez que c'est difficile.

Un excellent point de départ si vous voulez juste une sélection de menus propres mais frais qui fonctionnent.

2. Sélection simple

Voici une autre boîte de sélection très simple qui vise à se fondre plus naturellement dans chaque mise en page.

Cela repose sur des couleurs plus subtiles avec un jeu de couleurs noir et blanc uni. Mais il utilise également JavaScript pour animer le menu de sélection dans et hors de vue.

Cela fonctionne en ciblant un champ de saisie masqué qui se comporte exactement comme le champ de sélection. De cette façon, vous pouvez toujours extraire des données de l'interface dans vos formulaires, car cette solution n'utilise techniquement pas l'élément <select> réel.

Si la compatibilité est un problème, ignorez celui-ci. Mais je dois admettre que le design est magnifique et serait parfait pour le trafic de bureau.

3. Listes déroulantes HTML non nulles

Comme son nom l'indique, ce pack de menus sélectionnés vise à ne pas sucer. Ils ont tous des styles et des tailles différents avec des boutons sur lesquels vous pouvez cliquer pour changer les couleurs à la demande.

Évidemment, vous pouvez supprimer cette fonctionnalité dans votre propre mise en page et vous en tenir à un schéma qui fonctionne pour votre site. Mais dans l'ensemble, ces menus de sélection fonctionnent comme un menu normal et ils sont magnifiques à utiliser.

Si vous vous inquiétez de la compatibilité, envisagez de travailler avec ce modèle.

La plupart des changements sont cosmétiques, ils ne devraient donc pas trop affecter le comportement de l'utilisateur.

4. Espace réservé Sélectionner

La conception réelle de ce menu de sélection d'espace réservé est magnifique, mais la conception n'est pas le seul facteur ici.

Le développeur James Nowland a créé ce menu dans le but de supprimer la valeur par défaut du choix de sélection. Cela signifie qu'il se comporte plus comme un espace réservé dans les champs de texte où vous le voyez lorsque le champ est vide, mais une fois que vous avez défini une valeur, il disparaît.

Il est entièrement conforme et fonctionne avec l'élément de sélection HTML réel. Un champ d'option est masqué par défaut chaque fois que l'utilisateur sélectionne un choix. De cette façon, vous ne voyez jamais le texte "sélectionner une option" dans le menu déroulant. Solution vraiment créative!

5. Conception plate

L'esthétique compte souvent dans la conception Web et ce menu de sélection plat en est un excellent exemple.

Cela fonctionne toujours comme une sélection typique et la partie déroulante n'a pas été modifiée du tout. Mais juste le restylage de la sélection elle-même anime la page. Il se sent beaucoup plus classe que le vilain navigateur par défaut.

Vous pouvez même prendre ce modèle et le développer avec vos propres styles plats appliqués à la zone déroulante. Totalement votre appel!

Mais en tant que modèle de départ, c'est l'un des choix les plus simples pour n'importe quelle interface.

6. CSS pur

Je suis un grand fan du CSS pur plutôt que du JavaScript, car cela simplifie l'ensemble du processus de conception. Ce n'est pas facile mais il existe tellement de solutions.

L'un de mes préférés est cet extrait contenant non seulement des menus de sélection CSS purs, mais également des radios et des cases à cocher.

Tous ont l'air phénoménaux et devraient se fondre dans n'importe quel type de mise en page. Vous avez le contrôle total pour effectuer des modifications dans le CSS et, mieux encore, cela devrait également fonctionner dans tous les principaux navigateurs.

7. Listes déroulantes accessibles stylées

Voici l'un des exemples les plus stylisés de ce que vous pouvez faire avec les menus de sélection. Cet extrait créé par Andy Fitzsimon s'appuie sur JavaScript pour l'effet de liste déroulante et utilise un CSS personnalisé pour les dégradés et les icônes fléchées.

Ce qui est bien, c'est que ce menu prend également en charge la fonctionnalité non-JS, il fonctionnera donc même si JavaScript est désactivé. C'est ce qu'on appelle la dégradation gracieuse et c'est le meilleur ami d'un développeur Web pour l'accessibilité.

Pourtant, ces menus de sélection exécutent les dégradés Web 2.0 à l'ancienne qui peuvent ne pas s'intégrer dans une conception pour 2017 et au-delà.

Mais cela montre que vous pouvez emporter des menus sélectionnés où vous voulez avec un peu de créativité. Et ceux-ci peuvent fonctionner étonnamment bien si vous vous frayez un chemin à travers le CSS pour les personnaliser un peu.

8. Menu d'icônes SVG

Les menus de sélection par défaut ont l'icône de flèche sur le côté et pas grand-chose d'autre. Avec un peu de magie SVG, vous pouvez transformer cela en n'importe quelle autre icône de votre choix.

Ce menu personnalisé a sa propre conception d'icône plus fonctionnant avec un fichier SVG pur. Lorsque vous cliquez pour développer le menu, il s'anime en une icône X pour fermer/masquer.

Je n'ai jamais rien vu de tel auparavant et cela montre à quel point nous avons repoussé les limites des navigateurs Web.

Malheureusement, cela ne fonctionne pas sur l'élément de sélection HTML natif. Il s'agit d'une collection d'éléments de liste à l'intérieur d'un div , il devrait donc cibler un champ de saisie masqué chaque fois qu'une valeur est sélectionnée.

Heureusement, ce processus est très simple, donc si vous voulez ce design sur votre site, cela ne devrait pas prendre beaucoup de travail pour le faire fonctionner.

9. Sélectionnez l'expérience de la boîte

Voici un design expérimental qui a vraiment attiré mon attention. L'écran de démonstration de comparaison montre à quel point cela est différent des menus de sélection réguliers et comment cela modifie l'expérience de l'utilisateur.

Lorsque vous appuyez/cliquez pour ouvrir le menu pour la première fois, il glisse vers le bas avec des effets d'animation complets. Mais il ne se cachera pas à moins que vous ne cliquiez à nouveau sur le menu, contrairement aux menus de sélection typiques qui se cachent lorsque vous cliquez n'importe où ailleurs sur la page.

Un très bon exemple de design épuré avec une animation simple. Mais si vous n'aimez pas la fonctionnalité manquante de cliquer pour masquer, celle-ci peut être un facteur décisif.

10. Sélections sombres et claires

Si vous aimez également le CSS pur et que vous souhaitez des sélections élégantes, consultez cette solution et essayez d'utiliser l'une d'entre elles comme modèle de départ.

Ils s'appuient tous deux sur des dégradés CSS pour les arrière-plans et mélangent les menus déroulants dans la couleur inférieure du dégradé. Cela n'utilise aucun plugin JavaScript, vous pouvez donc accomplir cela avec juste un peu de CSS et un effort créatif.

Notez que le CSS lui-même est assez compliqué, il est donc utile de connaître le langage. Mais pour commencer, c'est l'un des meilleurs choix que vous trouverez, et il laisse également beaucoup de place à la personnalisation.