Principiul selectării personalizate cu css
Principiul în sine nu este complex: specificați pentru selectarea fundalului dorit cu imaginea, căptușeala-dreapta nu este mai mică decât elementul de control (astfel încât textul opțiunii să nu fie apelat pe acesta).
Dar ce a fost întotdeauna o captură? Faptul că browserele care se află în acel moment, indică stilurile și schimbă săgețile în select este extrem de dificil. Aici trebuie să recurgem la toate prefixele și hack-urile.
1. Deci, avem nevoie de o imagine pentru controlul selectat:
2. Hacks și proprietăți pentru a elimina aspectul standard al săgeții selectați selectați
- cu ajutorul proprietăților css3 (în practică funcționează până acum numai în Chrome, Safari și Opera, care sa mutat la motorul lor):
3. Atunci facem stiluri pentru design, nimic special
Un exemplu de lucru de selectare css
În structură folosesc cadrul Compass, deci exemplul este făcut pe SCSS. Dar, în general, este cu siguranță ușor de făcut pe CSS, urmând principiul prezentat mai sus sau pur și simplu prin deschiderea exemplului în instrumentele de dezvoltare și examinarea codului css compilat pentru elementul selectat.
Pentru a specifica atât gradientul, cât și imaginea pentru elementul de control, folosesc fundalul @mixin al cadrului Compass. Pe service codpen, acest mixin generează oarecum inadecvat css, așa că a trebuit să merg la site-ul oficial Compass și să copiez codul sursă @mixin background. În structura obișnuită nu o prescriu, deoarece acești dezvoltatori mixin ai cadrului au scris deja pentru mine (imi importe fișierul @import "busola").
UPD 25.06.14 despre firefox
Odată cu lansarea versiunii 30 a firefox, acest exemplu a încetat să mai funcționeze.
Fixarea incorectă a lipsei elementului
În timp ce Firefox își rezolvă erorile, dar nu și în valoarea aspectului. trebuie să uităm acest exemplu cu un hack și să îl folosim în moduri vechi: