Eines Abends habe ich Zeit
gekostet , Artikel im Internet gelesen und
bin auf
diesen Hub-Hub von Cyapa- Benutzern
gestoßen , in dem geschrieben steht, wie man Select auf reinem
CSS anpasst . Beim Anzeigen dieser Lösung stellte ich einige sehr unangenehme Momente fest, die ich in meiner Lösung für dieses Problem zu beheben versuchte. Also fangen wir an.
Beim Betrachten des Codes dieses Beitrags habe ich festgestellt, dass der Autor eine Auswahl getroffen hat, die beim Klicken außerhalb des Elements nicht geschlossen werden kann, sowie die Unfähigkeit, die Auswahl zu öffnen, wenn auf den Namen des Elements geklickt wird, sofern es bereits ausgewählt ist.
In meiner Anpassungsversion habe ich wie der vorherige Autor label, input [type = "radio"] und die Leistung von CSS-Selektoren verwendet. Da die Auswahl selbst mit CSS-Tools nicht vollständig angepasst werden kann, habe ich das Verhalten der Auswahl nachgeahmt.
Zu Beginn habe ich das folgende Markup eingefügt:
HTML-Code anzeigen <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>
Wenn Sie sich diesen Code ansehen, haben Sie möglicherweise die Frage: "Warum haben alle Eingaben den gleichen Namen?". Ich werde sofort antworten: Dies geschieht so, dass sich unsere Auswahl angemessen verhält (sie öffnet und schließt sich bei Bedarf). Aber das Wichtigste zuerst. Kommen wir zu dem meiner Meinung nach interessantesten Teil - CSS.
CSS-Code anzeigen 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); }
Hier ist es - der interessanteste Teil, in dem es notwendig ist zu verstehen, wie sich das Ändern der Auswahl des Eingangs (alle Eingänge mit dem Radiotyp haben den gleichen Namen => wir können nur einen auswählen) auf unsere Auswahl auswirkt. Ein weiteres Merkmal dieser Option ist die Möglichkeit, die Auswahl mithilfe des Attributs disabled in #select zu deaktivieren.
Ein fertiges Beispiel finden Sie
hier .
Das ist in der Tat alles. Ein paar Minuspunkte des vorherigen Autors sind behoben, so dass diese Lösung, glaube ich, im Moment als ideale CSS-Version der Auswahl angesehen werden kann. Ich hoffe, meine Lösung ist für jemanden nützlich.