checkbox a radio button v browseru Opera
Jaké možnosti nabízí browser Opera ve stylování formulářových prvků checkbox a radio button, když prvky nejsou vytvořeny pomocí ikon, ale pomocí částí na které je možné uplatnit kaskádové styly. Například úplně odstranit rámečky u prvků checkbox a radio button umí pouze prohlížeč Opera. Takový postup je velká výzva pro všechny ostatní browsery.
| aktuální browser | screenshot Opera 10.5 | {width: 21px; height: 21px; background: #fff; margin: 0;} |
 |
style="color: #aaa; padding: 0;" | |
 |
style="color: #0a0; padding: 1px;" | |
 |
style="color: #f90; padding: 2px;" | |
 |
style="color: #f55; padding: 3px;" | |
| nastavení velikosti a barvy zatržítka pro checkbox | ||
| aktuální browser | screenshot Opera 10.5 | {width: 23px; height: 23px; background: #fff; margin: 0; padding: 2px; color: #aaa;} |
 |
style="border: 1px inset #aaa;" | |
 |
style="border: 1px solid #0c0;" | |
 |
style="border: 1px solid transparent; background: #eee;" | |
 |
style="border: 1px solid transparent;" | |
| nastavení / odstranění rámečku pro checkbox | ||
| aktuální browser | screenshot Opera 10.5 | {width: 21px; height: 21px; background: #fff; margin: 0; padding: 0;} |
 |
style="color: #f00;" | |
 |
style="color: #f90;" | |
 |
style="color: #0a0;" | |
| nastavení barvy radio buttonu | ||
| aktuální browser | screenshot Opera 10.5 | {width: 21px; height: 21px; background: #fff; margin: 0; padding: 0;} |
 |
style="color: #f00; width: 17px; height: 17px;" | |
 |
style="color: #f90; width: 15px; height: 15px;" | |
 |
style="color: #0a0; width: 13px; height: 13px;" | |
| nastavení velikosti radio buttonu | ||
| aktuální browser | screenshot Opera 10.5 | {width: 23px; height: 23px; background: #fff; margin: 0; padding: 0; border: 1px solid transparent;} |
 |
style="color: #f00;" | |
 |
style="color: #f90;" | |
 |
style="color: #0a0;" | |
| radio button bez rámečku | ||
V každém řádku ukázky je vlevo živý formulářový element jak jej zobrazuje Váš aktuální prohlížeč, následuje screenshot z Opery 10.51 doplněný o použitý CSS kód. Pro každou skupinu prvků je použit skupinový styl, jeho výpis je v záhlaví skupiny. Podstatné je použití vlastnosti background, které vypne zobrazení elementů pomocí obrázků, nebo ikon a umožní uplatnit kaskádové styly při zobrazování elementů.
updated 09.04.2010