Un soir, je perdais du temps, lisant des articles sur Internet, et suis tombé sur
ce hub de l' utilisateur
Cyapa , où il est écrit comment personnaliser la sélection sur css pur. Dans le processus de visualisation de cette solution, j'ai trouvé plusieurs moments très inconfortables que j'ai essayé de corriger dans ma solution à ce problème. Commençons donc.
En regardant le code de ce post, j'ai remarqué que l'auteur a fait une sélection qui ne peut pas être fermée en cliquant en dehors de celui-ci, ainsi que l'impossibilité d'ouvrir la sélection en cliquant sur le nom de l'élément, s'il est déjà sélectionné.
Dans ma version de personnalisation, j'ai, comme l'auteur précédent, utilisé label, input [type = "radio"] et la puissance des sélecteurs css. Étant donné que la sélection elle-même à l'aide des outils css est complètement impossible à personnaliser, j'ai imité le comportement de la sélection.
Pour commencer, j'ai ajouté le balisage suivant:
Afficher le code html <label for="select" class="select"> <input type="radio" name="list" value="not_changed" id="bg" checked /> <input type="radio" name="list" value="not_changed" id="select"> <label class="bg" for="bg"></label> <div class="items"> <input type="radio" name="list" value="first_value" id="list[0]"> <label for="list[0]">First option</label> <input type="radio" name="list" value="second_value" id="list[1]"> <label for="list[1]">Second loooooong option</label> <span id="text">Select something...</span> </div> </label>
Lorsque vous regardez ce code, vous pourriez avoir une question: "Pourquoi toutes les entrées ont-elles le même nom?". Je répondrai tout de suite: ceci est fait pour que notre sélection se comporte de manière appropriée (elle s'ouvre et se ferme si nécessaire). Mais tout d'abord. Passons à la partie la plus intéressante, à mon avis, css.
Afficher le code CSS input { display: none; } #text { position: absolute; display: block; top: 0; padding-left: 10px; } .select { display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; } .select:before { content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; } .select input[name="list"]:not(:checked) ~ #text { color: black; background: white; } .select input[name="list"]:checked ~ #text { background: transparent; color: transparent; z-index: 2; } #select:disabled ~ .items #text { background: #eee; } .items { display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; } #select:not(:checked) ~ .items { height: 30px; } .items label { border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; } .items label:hover { background: #eee; cursor: pointer; } #select:checked ~ .items { padding-top: 30px; } #select:checked ~ .items label { display: block; } .items input:checked + label { display: block!important; border: none; background: white; } #select:checked ~ .bg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.4); }
Voilà - la partie la plus intéressante dans laquelle il est nécessaire de comprendre comment le changement du choix de l'entrée (toutes les entrées avec le type de radio ont le même nom => nous ne pouvons en choisir qu'une seule) affecte notre sélection. Une autre caractéristique de cette option est la possibilité de désactiver la sélection en utilisant l'attribut désactivé sur #select.
Vous pouvez trouver un exemple fini
ici .
En fait, c'est tout. Quelques inconvénients de l'auteur précédent sont corrigés, donc cette solution, je crois, pour le moment peut être considérée comme une version CSS idéale de la sélection. J'espère que ma solution est utile à quelqu'un.