Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

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

by
Length:LongLanguages:

Czech (Čeština) translation by Karel Krkoska (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:

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.

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.

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.

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é.

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.

Our sprite sheet
Náš sprite sheet

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

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!

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:

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:

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:

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.