Stilizarea listei derulante de selectare. Design CSS al select - utilizați proprietatea aspect

Foarte des, designerii desenează machete cu elemente de formă nestandard, de exemplu. Designul casetelor de selectare, butoanelor radio, intrărilor și selectoarelor diferă de ceea ce redă browserul în mod implicit. Astfel, designerul de layout se confruntă cu sarcina de a personaliza designul, inclusiv elementele selectate.

În acest articol ne vom uita la modul de schimbare aspect Selectați Cu toate acestea, vom adera la următoarea ideologie. Este logic să personalizați numai starea restrânsă implicită a selectorului, iar designul listei derulante ar trebui să rămână standard. Prin urmare, soluția descrisă mai jos nu va funcționa dacă aveți nevoie de o listă derulantă complexă, de exemplu, cu pictograme sau casete de selectare pentru fiecare opțiune.

Pe de altă parte, această abordare permite:

1. Nu scrie cod javascript, care ar emula comportamentul selectorilor. Toată logica depinde de browser. Există o mulțime de pluginuri astăzi, dar nu întâlniți adesea unul care să se ocupe de toate cazurile marginale pe care le întâlnește utilizatorul atunci când interacționează cu acest control. Un exemplu de astfel de caz extrem ar fi selectie automata poziția listei derulante (deschidere în jos sau în sus).

2. Deoarece browserul este responsabil pentru comportamentul și designul listei derulante, atunci nu este nevoie să scrieți vreo soluție separată pentru dispozitive mobile, care v-ar permite să lucrați convenabil cu selectoare pe dispozitive tactile cu ecrane mici. Selectoarele native încorporate acceptă înșiși tipul potrivit, pentru că pe platforme mobile totul a fost deja gândit. De exemplu, utilizatorii iOS când faceți clic pe selector, ei nu vor vedea lista dvs. personalizată, ci cea familiară standard. Utilizatorii nu vor trebui să își ajusteze comportamentul la site-ul dvs. comportamentul lor va fi același ca pe toate celelalte site-uri. Și este convenabil pentru el și din acest motiv ai făcut site-ul.

Deci, așa cum am menționat deja, proprietățile CSS3 sunt suficiente pentru a proiecta selecția.

Proprietatea principală care vă va permite să schimbați aspectul selectorului este aspectul. Forțează un element să devină orice vrei tu să fie, de exemplu poți forța un div să devină un buton. Cu toate acestea, pentru scopurile noastre, valoarea interesantă este none , ceea ce înseamnă că elementul nu trebuie să fie deloc stilat. În acest fel, putem elimina atributul specific selectării - săgeata în jos din dreapta.

Selectați ( -webkit-appearance: niciunul; -moz-appearance: niciunul; -ms-appearance: niciunul; aspectul: niciunul !important; )

După cum puteți vedea, eliminarea săgeții nu a fost dificilă, acum tot ce rămâne este să adăugați câteva proprietăți CSS banale, cum ar fi cadru, font și așa mai departe. Aici, desigur, puteți adăuga colțuri rotunjite, umbre etc., totul așa cum a desenat designerul în aspect. Lista principală derulantă rămâne nativă.

Selectați ( fundal: transparent; afișare: bloc; lățime: 100%; chenar: 1px solid #a7a7a7; culoare: #32353a; font-family: 16/Arial, sans-serif; font-size: 16px; line-height: 1,4 ; font-weight: normal: 7px 10px -aspect-webkit: nici unul;

Acum tot ce rămâne este să adăugați o săgeată sau o altă pictogramă ca fundal. Vom folosi fundalul, deoarece pseudo-elemente precum înainte și după nu vor funcționa pentru selectare. Pentru afisare mai buna site-uri pe diverse dispozitive cu diferite densități de pixeli, la diverse scaleși așa mai departe. Este obișnuit să folosiți pictograme SVG. Prin urmare, folosind un codificator URL online pentru SVG, vom converti pictograma într-un URI de date. Este important să rețineți că eticheta SVG trebuie să aibă atributul xmlns="http://www.w3.org/2000/svg".

Veți obține următorul rezultat.

%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" regulă de umplere ="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A

Deoarece săgeata folosită nu este standard, o puteți muta spre stânga sau utilizați orice altă imagine în loc de săgeată, sau puteți face cu totul fără pictograme.

Conectați fișier CSS in sectiunea cap:

.. ..

Dacă doriți să utilizați o altă temă, nu uitați să copiați fișierul CSS în folderul proiectului.

Aplicarea unui stil la Select

Când utilizați EasyDropDown.js, marcarea dvs. rămâne clară și intuitivă. Trebuie doar să adaugi element normal Selectați . De asemenea, puteți dezactiva acest element, atribuiți o etichetă și desemnați elementul care ar trebui să fie selectat implicit.

Pentru a stila un element, trebuie doar să îi atribuiți clasa drop-down. Iată un exemplu:

Setare Opțiunea 1 Opțiunea 2 Opțiunea 3 Opțiunea 4 Opțiunea 5

Asta e tot, nu ai nevoie de nimic altceva. Acum elementul tău SELECT va fi mai frumos.

Dacă trebuie să selectați inițial un element, utilizați atributul selectat. ÎN în acest caz, Nu recomandăm folosirea etichetei, deoarece... Afișajul poate fi ușor distorsionat.

... Opțiunea 2 ...

De asemenea, puteți dezactiva un element adăugând atributul dezactivat:

...

Alegerea unei teme

Pluginul EasyDropDown.js vine cu 2 teme de stil: Metro și Flat. Pentru a le conecta, utilizați atributul HTML5 data-attribute.

Pentru a aplica o altă temă, în interiorul elementului SELECT scrieți data-settings="("wrapperClass":"theme-name")" . Parametrul theme-name poate lua următoarele valori: metrou sau flat . Exemple:

...

Atenţie! Dezvoltare în continuare iar suportul pentru plugin a fost oprit din cauza faptului că acum face parte din .

Unul dintre cele mai neplăcute (și aș spune chiar teribile) lucruri în dezvoltarea web este aspectul formularelor html. Din păcate, nu există standard uniform afișarea elementelor de formular, indiferent de browser și sistem de operare, așa cum nu există nicio modalitate de a personaliza unele dintre aceste elemente folosind foi de stil în cascadă.

Nu poate fi complet stilizat următoarele elemente formulare html:

• lista verticală ;
• Caseta de bifat ;
• intrerupator .
• câmp pentru trimiterea unui fișier.

După cum reiese deja din titlul postării, aici vom vorbi doar despre selecții.

Există multe soluții gata făcute sub formă de pluginuri jQuery pentru stilarea listelor drop-down. Dar eu (din cauza faptului că niciunul dintre pluginuri nu mi se potrivea dintr-un motiv sau altul) am decis să merg prin a-mi reinventa propria roată și am scris propriul plugin, pe care îl împărtășesc în acest articol.

Aș dori să subliniez imediat că acest plugin nu este potrivit pentru toată lumea cazuri posibile folosind selectoare (a se citi dezavantaje).

Demonstrație a pluginului

Puteți vedea un exemplu de stil selector folosind pluginul meu. Le-am proiectat fără a folosi imagini.

Avantaje

• Când JavaScript este dezactivat, se afișează selectoare standard.
• Scriptul este de dimensiuni mici, aproximativ 4 kiloocteți.
• Funcționează în IE6+ și în toate browserele desktop moderne.
• Afișat în linie.
• Stilizat cu ușurință folosind CSS.
• Vă permite să setați inaltime maxima pentru o listă derulantă (proprietatea CSS max-height).
• Reglează automat lățimea dacă nu este specificată.
• Acceptă derularea rotiței mouse-ului.
• Are „poziționare inteligentă”, adică nu depășește partea vizibilă a paginii la deschiderea listei.
• Poate „prinde” apăsând tasta Tab și comuta cu săgețile de pe tastatură.
• Acceptă atributul „dezactivat”.
• De asemenea, funcționează cu selecții adăugate/modificate dinamic.

Defecte

• Nu acceptă atributul multiplu, de ex. nu permite selectarea mai multor elemente (multi-select).
• Nu acceptă gruparea elementelor din listă (etichetă).
• Nu acceptă comutarea cu săgețile de la tastatură atunci când lista este extinsă făcând clic cu mouse-ul.

Descarca

Pluginul nu este disponibil deoarece nu mai este relevant.

Plugin jQuery „SelectBox Styler”

Versiune: 1.0.1 | Descărcări: 11103 | Dimensiune: 7 KB | Ultima actualizare: 07.10.2012

Actualizări 22.09.2012 S-a convertit scriptul într-un plugin (inclusiv o versiune minimizată) și a adăugat, de asemenea, suport pentru adăugarea/modificarea dinamică a selecțiilor. 10/07/2012 S-a remediat comportamentul scriptului la utilizarea metodei onchange a etichetei. Conectarea pluginului

Dacă jQuery nu este încă activat pe site, atunci adăugați rândul următorînainte de etichetă:

Imediat după jQuery, includeți fișierul cu scriptul:

(funcție($) ( $(funcție() ( $("selectați").selectbox(); )) ))(jQuery)

Plasați acest cod înaintea etichetei după fișierele de mai sus.

La schimbare dinamică Selectoarele trebuie să ruleze un declanșator de reîmprospătare, de exemplu:

(funcție($) ( $(funcție() ( $(„buton”).click(funcție() ( $(„selectați”).find(„opțiune:nth-child(5)”).attr(„selectat ", adevărat); $("selectați").trigger("reîmprospătare"); )) )) ))(jQuery)

Cod HTML după execuția pluginului

Structura sa arată astfel:

-- Selectați --

• -- Selectați --
• Paragraful 1
• Punctul 2
• Punctul 3

-- Selectați -- Element 1 Element 2 Element 3

Clasele CSS utilizate pentru stilul selectorului

Pentru a emite selecții cu folosind CSS, utilizați următoarele clase:

.selectbox	container părinte pentru întreaga selecție
.selectbox .select	selectați în stare restrânsă
.selectbox.concentrat .select	focalizați pe selectare când este apăsat Tasta Tab
.selectbox .selectează .text	etichetă imbricată pentru selectarea restrânsă în cazul inserării imagine de fundal folosind tehnica ușii glisante
.selectbox .trigger	partea dreaptă a selectării restrânse (comutator condiționat)
.selectbox .trigger .săgeată	subetichetă pentru butonul radio (săgeată)
.selectbox .dropdown	wrapper pentru lista drop-down
.selectbox .dropdown ul	lista verticală
.selectbox li	selectați elementul (opțiune)
.selectbox li.selectat	elementul selectat selectat
.selectbox li.dezactivat	dezactivat (nu este disponibil pentru selecție) selectați elementul

Concluzie

Crearea unui astfel de script este o sarcină destul de minuțioasă, deoarece trebuie să țineți cont de multe puncte diferite. Chiar sper că nu vor apărea erori serioase. Dar, dacă este ceva, vă rog să-mi spuneți în comentarii.

Odată cu apariția CSS3 a devenit posibil să se facă stil frumos pentru orice element de pe site. Pentru că CSS3 oferă o gamă largă de capabilități care accelerează procesul de dezvoltare a designului unui site web. Astăzi vom stila elementul select în CSS. Pentru cei care nu știu, acest element este responsabil pentru lista derulantă de pe site. Mulți oameni folosesc vedere standard, dar poate fi schimbat pentru a se potrivi cu designul site-ului dvs.

Nu este nimic mai bun decât să vezi cum arată lista cu proprii tăi ochi:

Descarca

Iată cum arată această Selectare în CSS:

Articole similare pe acest subiect:

Acum voi descrie procesul de instalare pas cu pas folosind această listă derulantă sau pur și simplu Selectați.

1 pas. Conectam fișierele necesare

E simplu. După descărcarea arhivei cu sursele de acolo, vom avea nevoie de 2 fișiere (style.css și select.js - dacă conectați prima opțiune a listei sau select_demo2.js - dacă conectați a doua opțiune). Conectăm aceste două fișiere între etichete:

1 2

Pasul 2. Structura HTML Selectați elementul

Nu există nimic super complex în structură (și de ce ar trebui să existe, este doar HTML :)). Formă simplă, în interiorul căruia există un drop-down Select cu articolele sale:

1 2 3 4 5 6 7 8 9 10 11 12

Regatul Unit Țări: Vă rugăm să selectați o țară: Anglia Irlanda de Nord Scoția Țara Galilor

Pasul 3. Adăugarea de stiluri pentru Select CSS

Nu sunt mulți dintre ei. Vă ofer mai jos stilurile pentru prima opțiune a listei. Aș dori să vă atrag atenția asupra căilor către imagini. Sunt doar două dintre ele: primul este pentru deschiderea listei, iar al doilea pentru închidere. Ele arată ca două săgeți „sus” și, respectiv, „jos”. Acestea pot fi descărcate din sursele aflate la începutul articolului:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

.dropcontainer (poziție: relativă; dimensiunea fontului: 16px; culoare: #777; ) .trigger (culoare: #777; umplutură: 10px; dimensiunea fontului: 16px; lățime: 50%; fundal: #fff url () 98 % center no-repeat: blocare ; toate 0.5s ease; tranziție: toate 0.5s ease) .trigger: hover (culoare: #777; fundal: #f5f5f5 url (../images/select-arrow-open.png ) 98% center no-repeat ; ). activetrigger (culoare: #777; umplutură: 10px; dimensiunea fontului: 16px; lățime: 50%; fundal: #f5f5f5 url () 98% centru fără repetare; afișare: bloc; margine: 1px solid #ccc ; -webkit- box-sizing : border-box; .activetrigger :hover ( background : #f5f5f5 url (../images/select-arrow-close.png ) 98% center no-repeat ; culoare: #777; ) .activetrigger :activ ( fundal : #f5f5f5 url (../images/select-arrow-close.png ) 98% centru fără repetare ; culoare : #777 ; ) .dropcontainer ul ( dimensiunea fontului : 16px ; chenar : 1px solid #ccc : #fff ; dropcontainer ul li ( padding : 5px ; -webkit-transition : toate 0,5 s ușurință; -moz-transition : toate 0,5 s ușurință; -o-transition : toate 0,5 s ușurință; tranziție: toate 0,5 s ușurință ) .dropcontainer ul li : hover ( fundal : #f5f5f5 ; outline : none ; ) .dropcontainer ul li :first-child ( afișare : none ; ) .dropcontainer ul li :last-child ( border-bottom : none ; ) .dropdownhidden ( display : none ; ) .dropdownvisible ( înălțime : automat ; )

În exemplul demonstrativ, stilurile sunt situate în folderul css. Prin urmare, când setăm calea către un folder cu imagini în cale, scriem mai întâi „..” (două puncte) pentru a urca un nivel. Și apoi accesați folderul cu imagini.

Acum vreau să spun ce se poate face pentru a nu copia complet stilurile pentru a doua versiune a listei (care are o înălțime fixă), ci pentru a schimba o proprietate și a obține o listă fixă.

Trebuie să înlocuiți ultima proprietate vizibilă din meniul derulant:

1 2 3

.dropdownvisible ( înălțime : automat ; )

1 2 3 4

.dropdownvisible ( înălțime : 200 px ; overflow-y : derulare ; )

Și dacă nu uitați să înlocuiți scripturile (vedeți mai sus ce să schimbați în ce), veți obține următoarele:

În ce browsere funcționează bine acest Select CSS (listă drop-down)?

• ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
• ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
• ✓ Opera 12.14, Opera 12.15, Opera 12.16
• ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
• ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
• ✓ Apple iOS– iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad mini
• ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Adăugare la lecție - efect de hover creativ + VIDEO

Pe lângă lecție, vreau să vă spun cum să faceți un alt efect pe site foarte neobișnuit: efectul hover. Uita-te la asta scurt videoși vei vedea totul pentru tine.

Concluzie

Un alt element al site-ului - Selectați poate fi modificat pentru a se potrivi cu designul dvs. folosind CSS și Javascript. Nu este nimic complicat în procesul de instalare, așa că vei reuși. De asemenea, ca supliment la articol, primești mod creativ si video de instalare.