RODINNÁ FIRMA
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