Jak nastylovat formulářové prvky pomocí CSS

2.3.2015

Stylování formulářových prvků je pro hodně webmasterů bolavé místo. Nastylovat jde sice všechno, ale v mnoha případech se člověk neobejde bez JavaScriptu. CSS3 sice (víceméně) neumožňuje přímo stylovat formulářové prvky, nicméně poskytuje nám nástroje, jak tento problém vyřešit bez zbytečných skriptů.

Jak nastylovat checkbox a radiobutton jenom pomocí CSS

  • caniuse.com Funguje ve všech prohlížečích kromě IE8 a nižších.

Pro nastylování checkboxu a radiobuttonu využijeme provázanost mezi prvky input a label pomocí atributu for. Když tedy kliknu na popisek propojený s inputem, input se zaškrtne/odškrtne. Této vlastnosti se využívá k tomu, že nastyluji pouze popisek a samotný input schovám, přesto však zůstane zachována funkčnost.

Druhou využitou věcí je pseudoselektor :checked, spolu se selektorem následujícího sourozence + (nebo selektorem obecného sourozence ~). Pomocí těchto selektorů totiž můžu stylovat jenom ten label, který následuje za zaškrtnutým/nezaškrtnutým checkboxem.

Pro nastylování je dobré mít připravený sprite s jednotlivými stavy checkboxu. Stačí mít vzhled stavů checked a unchecked, případně disabled, pokud však berete ohled na přístupnost, bude se vám hodit také focus.

Tento postup funguje v Internet Exploreru verze 9 a vyšších a ostatních moderních prohlížečích.

Jak nastylovat select pouze pomocí CSS

Při stylování formulářového prvku select můžeme použít dva různé přístupy. Jeden spočívá v přidání obalovacího prvku (wrapperu), kterým schováme rozbalovací šipku selectu a jeho nastylováním zobrazíme vlastní. Druhý využívá nestandardní CSS vlastnost appearance.

Oba přístupy nabízejí možnost nastylovat select, nicméně prvky option pomocí CSS zcela nastylovat nejde, pouze částečně a jenom v některých prohlížečích.

Výhodou prvního způsobu je funkčnost v naprosté většině prohlížečů a nevýhodou je to, že option vypadá širší než samotný select. Druhý způsob zase nevyžaduje žádný přebytečný HTML kód, nefunguje ale v žádné verzi Internet Exploreru.

Stylování selectu pomocí wrapperu

  • Funguje ve všech moderních prohlížečích.

Vytvořím select a jeho wrapper:

Nastavím překrývání selectu obalovacím divem a ten nastyluji:

A takhle to pak vypadá:

Poznámky ke stylování selectu pomocí wrapperu:

  • Stejně jako u stylování checkboxů je dobré si připravit design více stavů selectu, tedy navíc disabled a readonly, focus, případně active.
  • V Chrome options nedědí barvu pozadí selectu, pokud používám světlé písmo na tmavém pozadí, tak nebude vidět.
  • Firefox u aktivního selectu zobrazuje ohraničení přerušovanou čarou. Má barvu písma a dá se jí zbavit trochu krkolomným způsobem – písmo nastavit průhledné se stínem, který má barvu původního textu.

Stylování selectu využitím CSS vlastnosti appearance

  • caniuse.com Nefunguje v žádném Internet Exploreru (ani mobilním), v Opeře mini a starších Operách.

Appearance je nestandardní CSS vlastnost, pomocí které se dá elementům nastavit vzhled různých formulářových prvků. Pro nastylování selectu použijeme hodnotu none. Ta u selectu zabrání vykreslení defaultního vzhledu, tedy hlavně rozbalovací šipky vpravo, což nám umožní nastylovat select podle potřeby.

Jako nestandardní vlastnost je potřeba appearance používat s vendor prefixem.

Takhle to vypadá