site logo

Formulářový element - select a CSS

Formulářový prvek select není na Internetu často používaný. Na intranetu naopak patří k základním prvkům formulářů. Použití je pro výběr z databázových číselníků (jméno pracovníka, číslo stroje ap.). Někdy se také používá pro jednoduché menu. Ukážeme si jaké možnosti máme při stylování tohoto prvku.

Následuje ukázka živých stylovaných prvků doplněná o použitý CSS a HTML kód. Dále najdete screenshoty uvedené ukázky z běžně používaných browserů. Takto je možné porovnat vzhled elementů v aktuální verzi prohlížeče se screenshoty z jiných browserů.

select {font: normal 13px Arial, SansSerif;}
<select> ... </select>
.se1 {width: 92px; height: 22px;}
<select class="se1" disabled> ... </select>
.se2 {width: 92px; height: 22px; color: #c00; border: 1px solid #c00;}
<select class="se2"> ... </select>
.se3 {width: 92px; height: 22px; background: #ffa;}
<select class="se3"> ... </select>
.se4 {width: 92px; height: 18px; border: 0;}
<select class="se4"> ... </select>
.se5 {width: 92px; height: 80px; margin: 0;}
<select size="5" class="se5"> ... </select>
.se6 {width: 92px; height: 22px;}
<select size="4" class="se6"> ... </select>

Na sreenshotu vlevo je element select ve Windows7, ostatní ukázky jsou z Windows XP. Safari zachycuje drobné chyby ve vykreslování v motivu Klasik, v motivu XP je zobrazení v Safari bezchybné, prakticky totožné s Chrome. Screenshoty formulářových prvků ze starších browserů najdete zde.

screenshot: formulářový prvek select v různých browserech

IE6 neumí pracovat s rámečkem prvku select a vždy "vyplave" nad ostatní prvky stránky. IE7 již umožnil správné překrývání, ale stále neumí pracovat s rámečkem. Teprve IE8 umožní základní úpravy vzhledu prvku select.

První řádek screenshotů zobrazuje element select bez použití kaskádových stylů. Šířka je určena nejdelším textem v prvcích option, výška je dána použitým fontem. Jako u všech formulářových prvků, použitý font musí být deklarován samostatně pro element, nebo pro třídu použitou v elementu.

Rozměr prvku nastavíme pomocí vlastností CSS na width: 92px; height: 22px;  a současně si ukážeme jak prvek vypadá ve stavu disabled. Select se chová podle tradičního box modelu, nikoli podle standardního W3C box modelu. Nastavené rozměry tedy platí pro vnější rozměr, hodnoty border a padding se neuplatní ve výpočtu rozměru. Více v článku box model formulářových elementů.

Ve třetím řádku je nastaven červený text a červený rámeček šířky 1 pixel. Browsery IE6 a IE7 s rámečkem prvku select pracovat neumí, ale IE8 to již zvládá. Jiná odlišnost, která není patrná ze screenshotů, je šířka rozkliknuté části prvku. Standardní browsery rozbalí option  tak, aby byly čitelné po celé šířce, IE je rozbalí jen do šířky určené pro nadřazený select, a nejde je zvětšit pomocí CSS např. option {width: 150px;}.

Nepsané pravidlo při zobrazování formulářových prvků je možnost přepnout do vzhledu klasik pomocí CSS stylu background (barva pozadí). Ne všechny starší browser tuto možnost splňovaly.

Nyní odstraníme rámeček pomocí CSS vlastnosti border: 0; ve všech moderních browserech se to podaří. Nový rámeček podle přání (třeba s kulatými rohy) můžeme vytvořit vnějším prvkem (konteinerem) a přitom bude select vypadat stejně ve všech browserech. V browserech IE6 a IE7 nebylo možné rámeček odstranit, ale můžete zkusit metodu popsanou v následujícím článku select experiment.

Rozvinutý element select

Trvale rozbalený prvek select získáme přidáním atributu size, který určuje kolik řádků (prvků option) má být viditelných. Takto stanovená výška není v různých prohlížečích stejná. Můžeme přidat i CSS vlastnost height pro přesné určení výšky. V tomto případě se vlastnost height projeví poněkud jinak, než ve sbaleném prvku. Důležité je ořezání dlouhého textu ve všech browserech tak, že je zachována určená šířka prvku. Rámeček trvale rozbaleného prvku v některých browserech je vykreslen jinak, než rámeček rozbalovacího prvku.

Poslední řádek screenshotů ukazuje zajímavou kombinaci rozvinutého prvku s předepsanou CSS výškou odpovídající jednomu řádku. Některé browsery tak vytvoří prvek podobný elementu spin. Nelze jej rozbalit, ale je možné vybrat požadované option pomocí dvojice tlačítek nahoru a dolů, případně pomocí kurzorových kláves. Obecná podpora takové varianty prvku ale zatím chybí.

Nezabývali jsme se zde nastavením CSS vlastností elementů option a optiongroup. Proto doporučuji další živé ukázky stylování elementu select a vnořených elementů option a optiongroup.

Atributy elementu select

<select name="..." size="5" multiple="multiple" >
  <option value="1" selected="selected">TAKE 1</option>
  ...
</select>

name="..." atribut name je nepovinný, ale jeho vynechání způsobí, že element není součástí formulářových dat odeslaných na server. Pokud je atribut definován, měl by obsahovat unikátní jméno ve formuláři.

size="5" použitím atributu size vytvoříme trvale rozbalený element select. Hodnota určí kolik položek option (řádků) je trvale viditelných. Defaultní hodnota je size="1", tedy dynamicky rozbalovaný element.

multiple tento atribut umožní vybrat více možností v jednom elementu select. Vícenásobná volba se provádí podobně jako se označují soubory ve Windows Exploreru, tedy pomocí kláves Ctrl, nebo Shift a kliknutím myší. Vedlejší efekt je trvalé rozbalení prvku select. Protože možnost vícenásobného výběru není viditelně indikována, je potřebné na to upozornit v doprovodném textu.

value="1" v elementu option udává hodnotu, která bude odeslána na server pokud je daná option vybrána. Odeslaná data jsou ve formě select name=option value. Hodnota může být text, nebo číslo.

selected v elementu option označí předvolenou položku. Při editování záznamu z databáze tímto atributem označíme původní, uloženou volbu. Vybranou položku option, lze jen změnit, nikoli zrušit. Podobně funguje sestava tlačítek radio button.

V případě kódu XHTML je správný zápis multiple="multiple" a selected="selected".

Překrytí prvku select

Následující ukázka ilustruje chybu prvku select v prohlížeči IE6. Menu aplikace by mělo být vždy nahoře, nad formulářem. V browseru IE6 je část menu aplikace nečitelná, protože select vyplave vždy nahoru, nad ostatní prvky stránky. Tato chyba se vyskytuje jen v browseru IE6 a starších. Nepomáhá nastavit z-index, tento prvek v IE6 "vyplave" vždy nahoru ať děláte cokoli.

formulářový prvek select a z-index screenshot

updated 13.03.2010