Pokročilé stylování checkboxu

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á)

Souhlasíte?

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

• Stylování formulářů
• iCheck — JS atrapa radio a checkbox <input>ů
• Switchery — JS atrapa checkboxů ve stylu iOS 7
• Různé efekty přepínání
• Switch Button #2