Přizpůsobení zaškrtávacích políček

V tomto zápisku si popíšeme, jak snadno přizpůsobit vzhled zaškrtávacích políček (check-box a radio button) tak, aby byly nejen pěkné, ale aby se hlavně zobrazovaly stejně ve všech webových prohlížečích.

V normálním případě se ne webových stránkách tvoří zaškrtávací políčka jednoduše zápisem např:

<input type="radio" name="typSC" id="typSC" value="1">

Webové prohlížeče pak v závislosti na operačním systému vykreslí zaškrtávací políčko. V našem případě ve Firefoxu na Linuxu takto:

a v Chromu

Je jasné, že pokud se snažíme stylovat stránku do nějaké barevné podoby, s tímto moc nádhery neuděláme.

Pak nezbývá, než přijít ke grafické úpravě zaškrtávacích políček. V našem příkladu jsem zvolil variantu úpravy kaskádového stylu plus využítí "nakreslených" políček v grafickém souboru.

Je potřeba vytvořit obrázek pro nezaškrtnuté políčko, pro zaškrtnutý radio button a pro zaškrtnutý checkbox. Vše je dáno do jednoho souboru png:

Je to jeden obrázek, s rozměry 24 x 72 px, který vložíme do umístění na webový server (v našem případě složka img). Okolo políček je průhledný prostor.

Teď je potřeba upravit/doplnit kaskádové styly:

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('img/check-ds.png') no-repeat 0 0;
  line-height  : 24px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -24px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -48px;
}

Z kaskádového stylu je patrná manipulace s obrázkem.

V samotné stránce vytvoříme políčka takto:

<input type="radio" name="typSC" id="typSC" value="1"><label>radio nezaškrtnuto</label><br>
<input type="radio" name="typSC" id="typSC" value="1" checked><label>radio zaškrtnuto</label><br>
<input type="checkbox" name="varSC" id="varSC" value="1"><label>checkbox nezaškrtnut</label><br>
<input type="checkbox" name="varSC" id="varSC" value="1" checked><label>checkbox zaškrtnut</label><br>

Je důležité za samotnými políčky použít značku <label>, pokud nechceme nic zobrazit, stačí zápis <label></label>.

Výsledek vypadá takto:

A to je vše. Myslím, že výsledek stojí za to.

Pavel Švec