A! Creați adesea diverse formulare și sondaje pe site-urile dvs. web? Dacă da, atunci probabil că ați vrut să schimbați elementele standard. În acest articol vă voi arăta cum să înlocuiți ușor și simplu elementele standard Caseta de bifat(casete de selectare) și buton de radio(comuta) la propriile lor. Vom folosi fondurile Numai CSS3!

Uitați-vă și încercați ce ați găsit pe pagina demo sau descărcați sursele:

Marcaj HTML

Să aranjam elementele pe pagină:

Nu este nimic special aici, dăm fiecărui element un id și un nume, folosim și o etichetă pentru a descrie elementele „comutator” și „căsuță de selectare”. În interiorul etichetei, introduceți un interval. De ce exact este scris mai jos.

Reguli CSS

Acum începe distracția. Să analizăm crearea doar a elementului „checkbox”; „comutatorul” este format într-un mod similar. Primul lucru pe care îl facem este să ascundem caseta de selectare standard din vedere:

Acum, devine clar pentru ce este elementul span. În loc de o casetă de selectare standard ascunsă, creăm una nouă folosind span :

Folosind un selector CSS, selectați toate intervalele din interiorul etichetei de etichetă care aparțin elementelor de intrare de tip Caseta de bifat(adică selectați toate „casetele de selectare”). Și folosim acest sprite (o imagine comună, în loc de multe):

Pentru intervalul selectat, setați înălțimea și lățimea la 19px și plasați imaginea de fundal.

Tot ce rămâne este să organizezi o regulă pentru „checkbox” activă (pseudo-selector :checked ). Pentru a face acest lucru, deplasați pur și simplu această imagine la stânga cu 19 px:

În acest mod simplu, folosind mai multe tactici, poți organiza elemente de pe site după gusturile tale. Pentru „switch-uri” regulile sunt construite într-un mod similar, doar în consecință imaginea de fundal este deplasată cu încă 19px și selectorul CSS este ușor modificat, în loc de type="checkbox" type="radio".

Personalizarea elementelor de formular este probabil unul dintre cele mai distractive lucruri de făcut în web design. Dacă această activitate este justificată, este la latitudinea fiecăruia să decidă singur, deși este evident că în vremea noastră designerii și designerii de layout încă își dedică timpul și energia acestui lucru.

Din păcate, doar unul CSS adesea nu suficient pentru a proiecta cu ușurință unul sau altul element al formei. Acesta este probabil motivul pentru care mulți oameni folosesc lucruri precum Uniformă pentru formularele lor. Personal, încerc întotdeauna să reduc cantitatea de Javascript folosită în astfel de scopuri, așa că vreau să vorbesc despre complet nativ HTML+CSS metoda de personalizare a butoanelor radio și a casetelor de selectare.

Sunt sigur că majoritatea specialiștilor de pe Habré folosesc metode similare, pentru cei care folosesc biblioteci js, cum ar fi Uniformă, sper că acest articol va fi util.

Merge!

Marcare

<ul >
<li >
<ID de intrare = "cfirst" tip = "caseta de selectare" nume = "primul" bifat ascuns / >
<etichetă pentru = "cfirst" > Caseta de selectare bifată</label>
</li>
<li >
<ID de intrare = "csecond" type = "checkbox" name = "second" ascuns / >
<etichetă pentru = "csecond" > Casetă de selectare debifată</label>
</li>
<li >
<ID de intrare = "cthird" tip = "checkbox" nume = "a treia" ascuns dezactivat / >
<etichetă pentru = „a treia” > Caseta de selectare dezactivată</label>
</li>
<li >
<ID de intrare = "clast" type = "checkbox" name = "ultimul" bifat ascuns dezactivat / >
<etichetă pentru = „clast” > Caseta de selectare dezactivată</label>
</li>
</ul>
<ul >
<li >
<input id = "rfirst" type = "radio" name = "radio" bifat ascuns / >
<etichetă pentru = "rfirst" > Radio verificat</label>
</li>
<li >
<ID de intrare = "rsecond" tip = "radio" nume = "radio" ascuns / >
<etichetă pentru = "rsecond" > Radio necontrolat</label>
</li>
<li >
<ID de intrare = "rthird" type = "radio" nume = "radio" ascuns dezactivat / >
<etichetă pentru = „a treia” > Radio dezactivat</label>
</li>
</ul>

Cred că toată lumea a observat utilizarea atributului ascuns care se ascunde intrare elemente însă graţie legăturii cu eticheta, încă îi putem manipula. Ca rezultat, obținem ceva de genul:

A devenit foarte plictisitor, dar totul funcționează. Acum tot ce rămâne este să aranjezi toate aceste lucruri așa cum ar trebui. Pentru a face acest lucru, vom folosi sprite-ul care este folosit pe site Uniformă.

Decor

input[ type= "checkbox" ] ,
intrare[ tip= "radio" ] (
afișaj: niciunul;
}
input[ type= "checkbox" ] + etichetă,
intrare[ tip= "radio" ] + etichetă (
font: 18px aldine;
culoare: #444;
cursor: pointer;
}
input[ type= "checkbox" ] + etichetă: :before ,

continut: "" ;
display: inline-block;
înălțime: 18px;
latime: 18px;
marjă : 0 5px 0 0 ;
imagine de fundal : url ( uniformjs.com/images/sprite.png) ;
background-repeat : fără repetare ;
}
input[ type= "checkbox" ] + etichetă: :before (
poziția fundalului : -38px -260px ;
}
input[ type= "radio" ] + etichetă: :before (
fundal-poziție : 0px -279px ;
}
introducere[ tip= „căsuță de selectare” ] :bifat + etichetă: :înainte (
fundal-poziție : -114px -260px ;
}
intrare[ tip= „radio” ] :verificat + etichetă: :înainte (
fundal-poziție : -108px -279px ;
}
input[ type= "checkbox" ] :dezactivat + etichetă: :before (
fundal-poziție : -152px -260px ;
}
input[ type= "checkbox" ] :bifat :dezactivat + etichetă: :înainte (
poziția fundalului : -171px -260px ;
}
intrare[ tip= "radio" ] :dezactivat + etichetă: :before (
fundal-poziție : -144px -279px ;
}
intrare[ tip= "radio" ] :verificat :dezactivat + etichetă: :înainte (
fundal-poziție : -162px -279px ;
} ​

Rezultatul este ceva de genul:

Datorită CSS3, putem obține aproape orice efect de care avem nevoie pe ecran. În această lecție ne vom uita la modul în care putem stila casetele de selectare și butoanele radio.

Intrare: bifat + etichetă: înainte ( conținut: „\2022”; culoare: #f3f3f3; dimensiunea fontului: 30px; alinierea textului: centru; înălțimea liniei: 18px; )

Acum, când apăsăm butonul radio, ar trebui să apară un mic cerc alb în cercul gri principal.

Casete de selectare pentru stil

Acum să începem să proiectăm casetele de selectare. Mai întâi, să ascundem elementul din nou:

Intrare (afișare: niciunul; )

Deoarece eliminăm afișarea casetei de selectare standard folosind pseudo-elementul :before, vom adăuga pur și simplu un chenar:

Etichetă casetă de selectare: înainte ( chenar-rază: 3px; )

Apoi vom adăuga un simbol „bifă” care va apărea când faceți clic pe caseta de selectare. Să facem asta prin analogie cu un cerc radio. Trebuie să convertim caracterul HTML de data aceasta? ✓.

Intrare: bifat + etichetă: înainte ( conținut: „\2713”; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; culoare: #f3f3f3; text-align: center ;linie-inaltime: 15px;

Ca rezultat, iată ceea ce ar trebui să obținem:

Rezultate

În această lecție, am analizat o metodă pe care o puteți folosi pentru a afișa butoanele radio și casetele de selectare de care aveți nevoie. Deoarece am folosit CSS3, această tehnică va funcționa numai în browsere care acceptă această tehnologie. Pentru a obține rezultate similare în browserele mai vechi, puteți utiliza cea corespunzătoare

De multe ori este necesar ca unele elemente html să aibă un aspect nestandard.

Anterior, a fost creat o mulțime de cod JavaScript pentru aceasta, ceea ce a făcut înlocuirile necesare. Acum puteți organiza totul folosind CSS pur. Mai mult, performanța este garantată în toate browserele moderne.
De ce am putea avea nevoie de asta? Există o mulțime de opțiuni de aplicare, de la un meniu frumos până la selectarea opțiunilor necesare produselor pentru a calcula prețul. De exemplu, luăm închiriere auto Harkov și pentru fiecare mașină facem posibilă alegerea opțiunilor necesare pentru închirierea mașinii. Este frumos și convenabil pentru utilizator atât de pe un computer desktop, cât și de pe un dispozitiv mobil.

Deci, trebuie să afișăm radiourile de intrare standard sub formă de butoane stilizate.

Să creăm un fișier de stil mic:

Radio_buttons ( margine: 20px; font: 14px Tahoma; ) .radio_buttons div (float: stânga; ) .radio_buttons input (poziție: absolut; stânga: -9999px; ) .radio_buttons etichetă (afișare: bloc; margine: 0 0 0 -1px ; umplutură: 8px 10px: 1px solid #BBBBBB: liniar-gradient (în jos, rgba(229,229,229,1) 0, 0, ; cursor: pointer; stânga: 0; chenar-sus-stânga-radius: 4px; raza: 4px)

Și acum aplicăm toate stilurile la marcajul html:

În acest mod simplu am obținut efectul dorit.

Acest articol va face în esență același lucru. dar pentru butoanele radio. Drept urmare, după ce vei folosi materialul din acest articol, vei obține un rezultat similar cu exemplul de mai jos.

Ca și în cazul casetelor de selectare, trucul se face folosind aceleași pseudo-selectori: bifat și: nu. În mod similar, butonul radio obișnuit este ascuns, iar în locul său este afișat unul nou, care are un aspect mai prezentabil.

De obicei, butoanele radio vin în mai multe bucăți deodată. Acestea vă permit să faceți alegeri în cadrul formularului înainte de a trimite. În exemple voi plasa și două butoane. Dacă aveți nevoie de mai mult sau mai puțin, atunci adăugați sau eliminați fără probleme, urmând câteva reguli despre care voi scrie mai jos.

De exemplu, vom avea două butoane obișnuite care vor avea următorul cod.

Primul buton

Al doilea buton

Am adăugat o etichetă la fiecare buton folosind eticheta. Dacă în cele vechi te poți descurca fără ele, atunci în cele noi vor fi necesare în orice caz. Este imposibil fără ei. Spre deosebire de butoanele radio obișnuite, cele noi trebuie să aibă și o clasă specificată. La final va arăta așa:

Primul buton

Al doilea buton

După cum puteți vedea, clasa a fost adăugată myradio. Această clasă va fi alocată noilor stiluri CSS. De asemenea, nu uitați de alți parametri standard pentru butoanele radio care trebuie adăugați la toate butoanele.

• id- ID-urile sunt adăugate la butoane, astfel încât etichetele pot fi atașate acestora.
• Nume- numele butonului. Se poate specifica la fel pentru mai multe butoane radio, apoi se va putea comuta între butoanele din formular. Dacă numele sunt diferite, atunci după activarea unui astfel de buton, nu îl veți putea deselecta.
• pentru la eticheta etichetei- trebuie să se potrivească cu id-ul butonului dorit. Punctul important este că eticheta ar trebui să fie amplasată imediat după butonul radio.

După ce ați terminat cu marcarea HTML a butoanelor, puteți începe să le schimbați aspectul. După cum am scris mai devreme, vom adăuga toate stilurile la clasa noastră - myradio. Pentru a face acest lucru, trebuie să adăugați această bucată de cod în fișierul de stil.

Myradio ( vertical-align: top; lățime: 17px; înălțime: 17px; margine: 0 3px 0 0; ) .myradio + etichetă ( cursor: pointer; ) .myradio:not(bifat) ( poziție: absolut; opacitate: 0; ) .myradio:not(bifat) + etichetă (poziție: relativă; padding: 0 0 0 35px; ) .myradio:not(bifat) + label:before (conținut: ""; poziție: absolut; sus: -3px; stânga : 0; lățime: 22px; bordură: 1px fundal: #FFF: nu (bifat) + etichetă: după (conținut: ""; poziție: absolut; #2ebbde; inset 0 1px 1px rgba(0,0,0,.5); opacitate: toate .2s ) :before (box-shadow: 0 0 3px 3px rgba(45,182,216,.3); )

Dacă lucrați cu CSS de mult timp, atunci asta este tot și nu vor mai fi pași. Puteți să vă uitați la rezultat și să editați stilurile pentru a se potrivi nevoilor dvs. Dacă nu înțelegi codul, dar vrei să-l dai seama cumva, atunci voi încerca să explic ce face. Nu voi descrie fiecare parametru, există tutoriale CSS pentru asta;

Să îndreptăm puțin butonul pentru versiunile mai vechi de Internet Explorer.

Să facem eticheta noastră accesibilă. Când treceți cu mouse-ul peste el, va apărea o mână în loc de o săgeată.

Myradio + etichetă (cursor: pointer; )

De aici începe modernizarea butoanelor. În primul rând, facem butonul nostru standard invizibil.

Myradio:not(bifat) (poziție: absolut; opacitate: 0; )

Setați poziționarea noului buton în raport cu eticheta noastră

Myradio:not(bifat) + etichetă (poziție: relativă; umplutură: 0 0 0 35px; )

Setarea aspectului unui buton inactiv atunci când nu există niciun punct în centru.

Myradio:not(bifat) + label:before (conținut: ""; poziție: absolut; sus: -3px; stânga: 0; lățime: 22px; înălțime: 22px; chenar: 1px solid #ccc; chenar-rază: 50% ; fundal: #FFF;

Acesta este aspectul punctului/cercului care apare în centru atunci când apăsați butonul.

Myradio:not(bifat) + etichetă:după (conținut: ""; poziție: absolut; sus: 1px; stânga: 4px; lățime: 16px; înălțime: 16px; chenar-rază: 50%; fundal: #2ebbde; caseta- shadow: inset 0 1px 1px rgba(0,0,0,.5); opacitate: 0.2s;

Transparența cercului/punctului atunci când este activat. După cum puteți vedea în paragraful anterior, a existat un parametru - opacitate: 0;

Myradio:verificat + etichetă:după ( opacitate: 1; )

Am evidențiat acest parametru ca fiind opțional. Efectul său este o umbră în jurul butonului atunci când focalizați în timp ce îl apăsați. În exemplu, acestea sunt cele mai joase butoane. Dacă nu vă place, nu trebuie să îl adăugați.

Myradio:focus + label:before ( umbră casetă: 0 0 3px 3px rgba(45,182,216,.3); )

Ca și în ultimul articol, cred că ați înțeles sensul și ați observat că aici nu este nimic deosebit de complicat. Tot codul poate fi schimbat în conformitate cu ideile tale, dar fără a greși și urmând sfaturile.

Asta e tot, mulțumesc pentru atenție. 🙂