Selectați - multiselect fără js

Eu (si, mi se pare, multi dintre voi) s-au intalnit de mai multe ori cu incompatibilitatea selectiei cu design-ul site-ului.
Durerea este că ele nu pot fi stilizate, iar în fiecare browser arata diferit.

Desigur, există un număr mare de soluții reprezentate de cadre / biblioteci (aceeași bootstrap).
Dar toți își asumă prezența lui JSa.
Desigur, nu este nimic teribil / rău în această privință, dar am încercat să fac un selector stilizat fără JS ca rezervă în cazul în care JS din anumite motive se rupe.

Selectarea instrumentelor

Prin instrumente în acest context, vreau să spun ce vom înlocui selectați.
Și alegerea mea a căzut pe butoanele radio din cauza comportamentului lor similar: puteți alege o singură opțiune la un moment dat.

Am înfășurat butoanele radio . astfel încât să nu strică ID-urile inutile și for-s.

Pentru a implementa selecția elementului dorit ca în selecție, trebuie să apară în partea de sus a listei.
Pentru a face acest lucru, să presupunem că valoarea elementului selectat ar trebui să fie poziționată absolut (pentru a ieși din flux) și plasată la vârf:

De asemenea, trebuie să respectăm regula: înălțimea fiecărui element trebuie să fie egală cu locul "vacant" (linia de sus) pentru elementul selectat

Partea principală funcționează - atunci când alegeți un element, se dovedește a fi în poziția de lider.
Rămâne să ne fie îngrijorat că în starea "liniștită" numai elementul selectat a fost văzut, iar restul listei a fost dezvăluit atunci când faceți clic, iar când faceți clic pe "lapte", lista trebuie închisă fără a schimba valoarea.

Manipularea pseudo-selectorului vine în minte: focalizare.
Adăugați un fel de intrare care va cădea sub ea. Am ales [type = text] pentru că poate fi setat la o mărime (întindere la lățimea și înălțimea totală) și pentru al bloca cu elementul principal selectat.

Ascundeți lista drop-down va fi limita de înălțime și de preaplin: ascunse:

Desigur, nu trebuie văzută (precum și butoanele de radio care reprezintă opțiunile):

Utilizați opacitatea: 0; în loc de afișare: nici unul; datorită faptului că elementele (vizual: ascunse inclusiv) nu pot avea o stare: focalizare.

Dirty hack

Și când se părea că totul sa dovedit, am dat peste o surpriză: când faceți clic pe un element de meniu din listă, focalizarea de la managerul intranetului se face mai repede decât clicul pe elementul listei.
Exact asta se întâmplă când faceți clic pe lapte - lista se închide.

Pentru a spori întârzierea înainte de a ascunde lista drop-down, va trebui să utilizați un hack murdar:

Dacă mergem mai departe, atunci vrem să facem același mod (fără JS) multiselect.
Nu fiecare integrator jquery-plugin face acest lucru cu JS (JQuery), și avem ceva de-a face cu asta!
Ei bine a spus - făcut, nu puteți cădea față în față în noroi.
Să încercăm să ne dăm seama dacă acest lucru este posibil. Și dacă nu, exact ce moment nu poți face fără JS.

Ce trebuie să schimbăm în exemplul anterior pentru a ne face multi selecții?
Fiecare element trebuie să poată fi selectat în orice fel.
Evident, trebuie să schimbăm butoanele radio la casetele de selectare:

Da, nu e tot, și nu este nevoie de un accident, cu ajutorul lui vom manipula lista noastră.

Dacă ne ocupăm de asta