Moderní tvorba webových aplikací

O webu

Pokročilé stylování checkboxu

Díky selektoru :checked lze v podporujících prohlížečích (Explorer 9 a novější) vytvářet zaškrtávací <input>y neotřelé podoby.

5 minut

Stačí k tomu pouze CSS. Kromě selektoru :checked se využívá přechodů pomocí transition (IE 10+). Podobného efektu jako u checkboxu lze docílit i u <input type=radio>.

Ukázky

(Jen pro test, že se řádně zaškrtává)

Jak to funguje?

  1. Skryje se skutečný checkbox/radio,
  2. vedle něj v kódu se umístí atrapa,
  3. atrapa musí být tvořena značkou <label> (nebo být uvnitř <label>u),
  4. lze ji při zaškrtnutí stylovat jako input:checked + .atrapa {}.

Podstatné je, aby se bylo jak dostat ze skutečného formulářového prvku na atrapu, tj. aby šlo použít selektor přímého (E + F) nebo libovolného sourozence (E ~ F).

Problémy

Kromě toho, že je funkčnost zdejšího řešení zatím omezená napříč prohlížeči, je potřeba uvážit, zda uživatel pochopí, jak to celé funguje. Chamurappi se na diskusi JPW zajímavě vyjádřil ohledně risik spojených s řádným pochopením těchto ovládacích prvků z pohledu uživatele. A zároveň dobře zformuloval konkrétní řešení pro starší prohlížeče (níže).

CSS a JS fallback

Výše uvedená ukázka je relativně funkční od Exploreru 9 (s přechodovou animací od IE 10), pro starší prohlížeče ji tedy nezbývá než vypnout nebo funkčnost doplnit JavaScriptem.

CSS

Stačí využít nějaký selektor, který funguje shodně s :checked až od IE 9.

Například by šlo použít kořenový selektor (:root).

.atrapa {display: none}
:root .atrapa {display: block}
:root input.checkbox-ke-skryti {display: none}

JavaScript

Javascriptový fallback, který by atrapu nerušil, by vypadal tak, že by se přidal onclick="this.className = this.checked ? 'checked' : '';" a krom pseudotřídy :checked by se atrapa chytala i třídy .checked.

Kombinace

Oba fallbacky je možné zkombinovat a atrapy vypínat jen v prohlížečích starších než IE 9 bez zapnutého JavaScriptu.

.atrapa {display: none}
:root .atrapa, 
.js .atrapa {display: block}

:root input.checkbox-ke-skryti, 
.js input.checkbox-ke-skryti {display: none}

Odkazy jinam

Související články

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

4 minuty

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025