A jelölőnégyzetek és rádiógombok regisztrációja a css3-mal

A CSS3 megjelenésével lehetőségünk nyílik szinte mindent és bármit létrehozni. A mi mai cikkünkben, amint azt a fejlécből láthatjuk, arról fogunk beszélni, hogyan kell megtervezni a jelölőnégyzet és a rádiógombok megjelenését.

Ez a kétféle input elemek az új űrlap elemek, amelyek meglehetősen nehéz helyesen, és intézkedik (úgy, hogy ugyanúgy néz ki a különböző platformokon) - Windows, OS X és a Linux különböző tervezési és megjelenítési módja az űrlap elemek.

A jelölőnégyzetek és rádiógombok regisztrációja a css3-mal


Ha ezt a két elemet szeretné megtervezni, akkor ez az útmutató csak neked szól. Szóval, menjünk.

Kezdjük egy új HTML dokumentum létrehozásával. A HTML-dokumentum szerkezete a következő lesz.

Tehát befejeztük a HTML-jelölést, és most kezdjük el létrehozni a "bemeneti" elemek stilizációját. Először foglalkozzunk a rádiógomb típusával. Az alsó sor az, hogy megváltoztassuk az operációs rendszer szabványos kialakítását az alábbi képernyőképen.

A jelölőnégyzetek és rádiógombok regisztrációja a css3-mal

Először is a kurzort egy mutatóra cseréljük, amely lehetővé teszi számunkra, hogy értesítsük a felhasználót, hogy ezt az elemet rákattinthatjuk.


Ezután elrejti a rádióadót.


Ezt követően a rejtett rádióadót a pszeudo-elemre cseréljük: korábban.


A fenti stílusok a jelölőnégyzetre vonatkoznak. Az egyetlen különbség az, hogy a rádióbemenet körként szerepel. Ennek a hatásnak a eléréséhez hozzáadunk egy határ sugarat, amelynek értéke éppen az elem magasságának és szélességének fele.


Jelenleg a projektünk így néz ki:


Most beljebb egy kis kört adunk hozzá, amikor a bemeneti elemet kiválasztjuk. A CSS3 pszeudosztályt használjuk: a HTML-lapkal () együtt ellenőrizzük. Ez a tabulátorral határolt jel jelenik meg a tartalomparaméter használatával, ezért a HTML-ről CSS-re kell konvertálni az Entity konverziós eszköz használatával.


Tehát, ha egy elem egy rádió bemenet (rejtett) fogja jelölni, illetve a kijelölt címkén belül egy kisebb kört, ahogy az a következő képen.

A jelölőnégyzetek és rádiógombok regisztrációja a css3-mal


Másrészt a képet is használhatja, és megjelenítheti azt a háttérkép-paraméterrel a pszeudo-elemben: korábban, amit korábban hozzáadtunk. Nem használtuk, mert nem szeretnénk a képeket használni, ha más lehetőségek is vannak.

Most rendezzük el a jelölőnégyzet megjelenését. Először is elrejtjük ezt az elemet.


Mióta a beviteli elemet a pszeudo-elemre cseréltük: korábban, mostantól lekerekített sarkokat adhatunk.


Ezután ugyanúgy kell hozzá egy kullancsot, mint a rádióbevitel esetében. Ezúttal a HTML-jelölést () használjuk.


És most nézzük meg a végeredményt.

Ez csak egy a beviteli elemek megtervezésének egyik technikája, és természetesen megvan a joga és hatásköre, hogy önállóan finomítsa ezt a tervezési módszert. Mivel a CSS3: ellenőrzött, ez a technika csak azokban a böngészőkben fog működni, ahol megfelelő támogatást nyújt. Szóval, ha akarod, használhatod a jQuery plugint is.

Tekintse meg a bemutatót. | Letöltés forráskód

Kapcsolódó cikkek