Rychlý tip: Checkboxy a radio buttony v CSS3 jednoduše

() translation by (you can also view the original English article)

Přemýšleli jste, jak stylovat zaškrtávací políčka a přepínače, ale bez JavaScriptu? Díky CSS3 to jde! A zde vidíte co budeme tvořit:

Pokud hledáte nějakou grafiku, kterou použijete pro vaše UI prvky, podívejte se na tyto UI balíčky na Envato Elements. Nebo si vezměte hrnek kafe a začneme s tímto tutorialem.

1. Rozumět procesu

Doporučené čtení: 30 CSS selektorů které musíte znát nazpaměť

Pro ty kteří se cítí sebevědomě se svými CSS schopnostmi a jen potřebují popostrčit správným směrem, zde je nejdůležitější CSS řádka celého tutorialu:

1	input[type="checkbox"]:checked + label {
2
3	}

A nyní pro ty, kteří potřebují ještě trochu víc nasměrovat, nebojte se, čtěte dále!

Dobře, zpět k tématu. Co budeme přesně dělat? Díky šikovnému :checked pseudo selektoru, můžeme zaměřit element na základě jeho statusu (ne)zaškrtnutí. Můžeme použít + , sourozence z CSS2.1 k zaměření elementu přímo checkboxu nebo radio buttonu, což je v tomto případě label.

2. Nastavení našeho HTML

Nyní začneme vytvořením našeho HTML a CSS filu (nebo jak preferujete zacházet s vaším stylem) a dáme se do práce. Předpokládám, že víte jak to udělat, takže o to se starat nebudeme.

Abyste mohli začít, ukážu tuto techniku na checkboxu, ale proces pro radio button je identický a je obsažen ve zdroji.

Ok, tak doopravdy začneme ne? Jako první vytvořte náš checkbox, nasledovaný labelem.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Teď pro případ, že moc nevíte o <label> elementu, musíte spojit input a label, aby input reagoval skrz label. To se provede použitím for="" a ID inputu.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

Také přidám <span> do labelu, což je spíš osobní preference než cokoli jiného, ale vše bude jasné v kroku 3.

3. Proč tu jsme: CSS

Tady začíná zábava. První věc, kterou uděláme, což je základ tohoto celého tutoriálu, schováme checkbox.

1	input[type="checkbox"] {
2	display:none;
3	}

Tak to by bylo, můžeme stylovat label, přesněji spíš span uvnitř labelu. Dělám to tímto způsobem, abych měl větší kontrolu nad přesnou pozicí checkboxu. Bez toho by to nejspíš používalo obrázek pozadí v labelu a pozicování by bylo složité.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Dobře, nechte mě vám to nejdříve rychle vysvětlit. První, všimněte si pozadí. Mám malý sprite sheet,takže vše co musím udělat je, nastavit pozici pozadí v tomto spanu. Span sám o sobě je přesná šířka a výška každého "sprite" v sheetu, čímž je jednoduché definovat každý stav.

Zde je zbytek CSS, spefické pro můj styl. Toto je čistě estetická věc a specifické pro můj design nebo náladu.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Jak to funguje

Moc práce nám nezbývá, tak to pojďme dokončit. Poslední věc co musíte udělat je, poskytnout stav elementu když je vstup zachecknut a volitelně také, když na něj nejedete myší. Je to jednoduché, podívejte!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Všimněte si, že díky sprite sheetu, vše co musím udělat, je změnit pozici pozadí. Také si všimněte, že vše co jsem musel udělat pro styl labelového spanu, když je zaškrtnut checkbox/radio button, bylo použít CSS3 :checked pseudo selektor.

Poznámka k podpoře prohlížečů

Pseudo selektory mají skvělou podporu napříč všemi prohlížeči, ale platí obecná upozornění:

Can I use data for pseudo selectors — Mohu použít data pro použití obecných pseudo selektorů

IE9 on Windows 7 — Fallback: IE9 na Windows 7

Dřívější verze mobilních prohlížečů jsou také problémové - podpora :checked není úplně jasná. Mobilní verze Safari před iOS 6 to například nepodporuje.

Závěr

Dobře, takže máme hotovo, že? Radši to ale ještě zkontrolujeme. První HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Vypadá vaše stejně? Nezapomeňte přidat <span>! Až s tím budete experimentovat, vřele doporučuji najít jiný způsob, jak udělat tuto část. Rád bych viděl co vymyslíte, aby to bylo ještě efektivnější. Teď k tomu CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Máte vše? Perfektní. Myslete na to, že mnoho stylování je specifické pro demo soubory. Doporučuji vám vytvořit vaše vlastní a experimentovat s umístěním a prezentací.

Ve zkratce, to nejdůležitější co si můžete odnést je první řádek CSS, který jsem napsal úplně nahoře:

1	input[type="checkbox"]:checked + label {
2
3	}

Tímto můžete vytvořit různé věci. Možnosti s :checked jdou za hranici checkboxu a radio buttonu, ale toto experimentování nechám už na vás. Zkuste například experimentovat s:

Přidat 2 spritesheety pro retina displeje
Použít SVG místo bitmapy

Doufám, že se vám tento krátký článek líbil a také doufám, že to co jste se zde naučili dokážete rozšířit nebo vylepšit!