site logo

Formulářové elementy ve starších prohlížečích a použití CSS

Jak vypadaly formulářové prvky ve starších browserech ukazuje tato stránka. Za pozornost stojí elementy v browseru Safari 3 a Opera 9.6. Starší Safari používalo vzhled typický pro Apple, od verze Safari 4 přebírá vzhled daný operačním systémem. Tak nám odpadla možnost vychutnat si jablečné chuti i ve Windows, to mi přijde líto. Podobně Opera ačkoli měla asi nejvíce vkusné formulářové prvky, přešla od verze 10.50 na prvky podle operačního systému.

Chybí zde živé formuláře, uvedeny jsou jen screenshoty, které je škoda vyhodit. Kaskádové styly použité pro získání screenshotů jsou stejné jako na stránkách věnovaných jednotlivým typům formulářových prvků, kde najdete podrobný výpis CSS. Původní stránky jsou aktualizovány na ukázky v novějších browserech. Chybí zde Chrome, který v době vzniku ukázek nebyl příliš rozšířený.

Element <input type="text">

screenshot: formulářový prvek input type=text ve starších browserech

První řádek zobrazuje velikost elementu určeného atributem size="7" a prázdné prostory okolo prvku. Druhý řádek ukazuje stav disabled. "Červený" řádek upozorňuje na chybu typu mizející textový kurzor, a odstranění této chyby v "zeleném" řádku. Dále vidíte použití vlastnosti background a přepnutí vzhledu do podoby klasik. Poslední řádek je jednotný vzhled prvku, vhodný ke vložení do obálky s designem podle potřeby autora.

Element <textarea>

screenshot: formulářový prvek textarea ve starších browserech

Velikost elementu určená pomocí atributů cols a rows nedává ani podobné rozměry. Pomocí width a height jsou rozměry již podobné, ale různé díky různému defaultnímu border-width nikoli shodné. Předepsaný jednotný border, navíc klasický vzhled pomocí background sjednotí rozměry i vzhled až na svislý posuvník v Opeře, který nejde odstranit. Lze ale přidat posuvník do ostatních prohlížečů. Pak je vzhled téměř stejný.

Element <select>

screenshot: formulářový prvek select ve starších browserech

Nejdříve element bez CSS, následovaný elementem s předepsaným rozměrem width: 92px; height: 22px; ve stavu disabled. "Červený" řádek ukazuje nemožnost nastavit jednopixelovou šířku border v IE. Přepnutí do stavu klasik se zdaří jen ve FF a Opera. Odstranit rámeček prvku select se nepodaří v browserech IE. Jak odstranit rámeček v browserech IE6 a IE7 se dozvíte v článku select experiment.

Trvale rozbalený prvek select získáme přidáním atributu size, ale rozměry nejsou stejné. Když přidáme i CSS vlastnost height pro přesné určení výšky a snížíme ji na výšku jednoho řádku, dostaneme prvek podobný elementu spin (poslední řádek).

Elementy <input type="checkbox">, <input type="radio">

screenshot: formulářový prvek checkbox a radio button ve starších browserech a použití CSS

U těchto elementů nás zajímá, zde lze měnit jejch rozměr a jak velký prostor zabírají. Odstranit rámeček se nepodaří, protože tyto elementy jsou v podstatě ikony, nebo obrázky a rámeček je součástí těchto obrázků.

V prvním řádku je defaultní zobrazení, ve druhém stav disabled. Ve třetím řádku je nastavena barva pozadí a odlišný vliv této vlastnosti. Čtvrtý řádek ukazuje vliv CSS vlastností margin: 0; border: 0; padding: 0; což se projeví jen v některých prohlížečích. Poslední řádky ukazují vliv změny rozměru na výslednou velikost prvků. Nejdříve je předepsaný čtvercový rozměr 20x20, nakonec obdélníkový rozměr 36x24.

Element <input type="submit">

screenshot: formulářový prvek aubmit a použití CSS ve starších browserech

První řádek zobrazuje elementy bez použití stylů a některé screenshoty zachycují tlačítko v aktivním stavu, tedy "stisknuté". Zobrazit tento tzv. focus i pro ostatní formulářové prvky umí jen browsery Safari a Chrome. Dále je zachycen prvek ve stavu disabled. Nastavení rozměrů pomocí CSS zvládají všechny browsery. Nastavená barva pozadí přepíná vzhled do klasik ve všech prohlížečích.

Poslední řádek ukázky odesílacích tlačítek je vytvořen elementem button. Do tohoto prvku můžeme vložit obrázek (ikonu) i text. Bohužel chybné zpracování atributů elementu button při odeslání formuláře v IE6 a 7 omezuje praktické použití na formuláře s jedním odesílacím tlačítkem, kdy serverový skript netestuje jméno prvku který inicioval odeslání formuláře.

Ukázky formulářového elementu <input type="file"> zde nejsou uvedeny. Použití stylů pro tento prvek ve starších browserech jen zhorší jeho defaultní zobrazení.

updated 04.03.2009