site logo

checkbox a radio button v browseru Opera

Ideální možnosti stylování formulářových prvků checkbox a radio předvedl browser Opera (do verze 12). Pomocí CSS lze například lze úplně odstranit rámečky, použít barev a měnit velikost prvků. Základní tvar, typický pro formulářový prvek se při tom nezmění. To je velká výzva pro všechny ostatní browsery.

Opera od verze 15 začala používat vykreslovací jádro Blink, odvozené od jádra WebKit. Stejné jádro používá browser Chrome. Toto jádro spoléhá při vykreslení formulářových prvků checkbox a radio na OS Windows, podle 20 let starého doporučení W3C. Přechod na moderní vykreslovací jádro je jistě krok vpřed, zobrazení zde testovaných prvků je krok zpátky.

aktuální browser screenshot Opera 12 {width: 21px; height: 21px; background: #fff; margin: 0;}
screenshot style="color: #aaa; padding: 0;"
screenshot style="color: #0a0; padding: 1px;"
screenshot style="color: #f90; padding: 2px;"
screenshot style="color: #f55; padding: 3px;"
nastavení velikosti a barvy zatržítka pro checkbox
 
aktuální browser screenshot Opera 12 {width: 19px; height: 19px; background: #fff; margin: 0; padding: 2px;
  color: #aaa;}
screenshot style="border: 1px inset #aaa;"
screenshot style="border: 1px solid #0c0;"
screenshot style="border: 1px solid transparent; background: #eee;"
screenshot style="border: 1px solid transparent;"
nastavení / odstranění rámečku pro checkbox
 
aktuální browser screenshot Opera 12 {width: 21px; height: 21px; background: #fff; margin: 0; padding: 0;}
screenshot style="color: #f00;"
screenshot style="color: #f90;"
screenshot style="color: #0a0;"
nastavení barvy radio buttonu
 
aktuální browser screenshot Opera 12 {width: 21px; height: 21px; background: #fff; margin: 0; padding: 0;}
screenshot style="color: #f00; width: 17px; height: 17px;"
screenshot style="color: #f90; width: 15px; height: 15px;"
screenshot style="color: #0a0; width: 13px; height: 13px;"
nastavení velikosti radio buttonu
 
aktuální browser screenshot Opera 12 {width: 21px; height: 21px; background: #fff; margin: 0; padding: 0;
  border: 1px solid transparent;}
screenshot style="color: #f00;"
screenshot style="color: #f90;"
screenshot 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 2013-09-13