Css selectați fără javascript și elemente suplimentare

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