Formulářový element - select a CSS
Formulářový prvek select patří k těm velice obtížně stylovatelným prvkům a to především díky neschopnosti browseru IE. Zatímco na Internetu není využití nejčastější, na intranetu patří k základním prvkům formulářů. Používá se pro výběr z databázových číselníků (jméno pracovníka, číslo stroje ap.).
Element select slouží k výběru možností jedna z mnoha, nebo více z mnoha. Podobně funguje i element radio, nebo checkbutton. Tento element zabírá podstatně méně místa, ale je také méně přehledný. Ve své základní podobě je viditelná jen vybraná volba, ostatní jsou skryté. Ani v rozvinuté podobě nemusí zobrazit všechny možnosti a je potřeba použít svislou rolovací lištu.
<select> ... </select>
.dimensions {width: 100px; height: 22px;}
.borderless {width: 100px; height: 18px; border: none;}
.background {width: 100px; height: 18px; background: #ffa;}
.scontainer {position: relative; width: 100px; height: 18px;
top:0; left:0; overflow: hidden;}
.experiment {position: absolute; width: 104px; height: 22px;
top: -2px; left: -2px; background: #ffa;}
Pro získání screenshotů byl použit browser FireFox 3.0.b1. Ve starší verzi FireFoxu nastavení výšky select prvku způsobilo vykreslení prvku vždy o 2 pixely větší. Beta verze 3 již tuto chybu nemá.
V defaultním zobrazení, bez jakéhokoli předepsaného rozměru, je velikost elementu select odvozena od typu a velikosti použitého písma a délky textů v elementech option. V našem příkladu byly rozměry následující: IE7 62x22, IE6 61x22, FF 65x22, Opera 57x20, Safari 66x22 pixelů. Tedy žádná shoda.
Zkusíme nastavit rozměry pomocí stylu. Vlastnost margin: 0; nemá viditelný vliv na rozměr, padding: 0; v Opeře způsobí snížení celkové výšky elementu z 20px na 18px, ale způsobí to splynutí tlačítka a dolní hrany elementu, což vypadá divně.
Nastavit rozměr width: 100px; height: 22px; se podařilo ve všech browserech. Malou vyjímkou je Safari, kde je obtížné označit výsledný rozměr, protože stín někdy zasahuje do okolí. Podle W3C box modelu by vnější rozměry měly být větší o velikost rámečku a padding, ale prvek select se takto nechová. Například element textarea naopak W3C box model respektuje.
Nyní zkusíme zušit rámeček. Předepíšeme width: 100px; height: 18px; border: none; výška je zvolena 18 pixelů, tedy o 2+2 pixely nižší než přirozená defaultní výška pro použitý typ písma. Jak je zvykem, IE trucuje, ostatní browsery poslouchají.
Nastavení stylu pozadí background přepíná prvek select do vzhledu Classic. Shoda vzhledu i rozměrů je dostatečná pro další experimenty.
Experimentální úprava prvku select pro odstranění rámečku (border). Podrobný popis potřebných stylů CSS najdete v článku select experiment.
Nezabývali jsme se zde nastavením CSS vlastností elementů option a optiongroup. Doporučuji živé ukázky stylování elementu select.
Rozvinutý element select
Jen několik ukázek jak vypadá rozbalený element select, abychom viděli jaký má vliv délka textů na výsledný rozměr elementu.
<select size="5" style="width: 100px;"> ... </select> <select style="width: 80px;"> ... </select>
Trvale rozbalený prvek select má následující rozměry (závislé na typu písma): IE7 100x86, IE6 98x84, FireFox 100x86, Opera 100x94, Safari 102x85. Shoda rozměrů nic moc. Důležité je ořezání textu ve všech browserech tak, aby byla zachována předepsaná šířka prvku. To může být riskantní v případech kdy předem neznáme délku textu v prvcích option. Například není jasné která sub-verze FireFox byla zvolena.
Pro screenshoty dynamicky rozvinutého prvku select zmenšíme šířku prvku na width: 80px. Standardní browsery rozbalí option tak, aby byly čitelné po celé šířce, IE rozbalí option jen do šířky stanovené pro select, a nejde je zvětšit pomocí CSS např. option {width: 100px;}.
Atributy elementu select
<select name="..." size="5" multiple="multiple" >
Podíváme se jen na atributy specifické pro formulářový prvek select. Ostatní společné atributy (např. class) jsou zde vynechány.
name="..."
Atribut name je povinný a musí být naplněn unikátním jménem. Vynechání atributu způsobí, že vybraná hodnota elementu nebude odeslána.
size="5"
Použitím atributu size vytvoříme trvale rozbalený element select. Hodnota určuje kolik řádků je trvale viditelných. Defaultní hodnota je size="1", tedy dynamicky rozbalovaný element.
multiple="multiple"
Atribut multiple umožní zvolit více možností v jednom elementu pomocí kláves Ctrl, nebo Shift a kliknutím myší. Podobně vybíráme soubory ve Windows exploreru. Variantu multiple prvku select je vhodné doplnit vysvětlujícím textem. Vedlejší efekt je trvalé rozvinutí prvku v IE a FireFoxu, Opera ponechá sbalený prvek, ale změní jednoduché rozbalovací tlačítko na dvojité.
Překrytí prvku select
Následující ukázka ilustruje rozdílné chování prvku select v různých prohlížečích. Drop down menu by mělo být vždy nahoře, nad formulářem. V browseru IE6 je část drop down menu nečitelná, je překrytá selectem. Tato chyba se vyskytuje jen v browseru IE6 a níže.
Zde nepomůže nastavit z-index, tento prvek v IE6 "vyplave" vždy nahoru ať děláte cokoli. Neznám způsob jak toto chování změnit.
Celá problematika okolo prvku select je velmi rozsáhlá zdaleka ne všechny možnosti a varianty stylování zde byly probrány. Další otázky jsou spojeny s událostmi a odesíláním hodnot tohoto prvku, především ve spojení s atributem multiple.
updated 01.12.2007