Stylování <select>u

Odsazení padding

Funguje od Exploreru 8 na značce <select>, na <option>u umí padding jen Firefox.

Barvy

Obarvení <select>u je možné ve všech prohlížečích. Je možné barvit i konkrétní <option> položky. Pokud se tak neučiní, převezmou položky barvu <select>u.

Jak je vidět z ukázky, nastavení pozadí (background) způsobí přepnutí na oldschool vzhled, téhož je možné docílit vlastností border.

Rámeček border

S rámečky není problém. Firefox je umí i pro jednotlivé položky.

V prohlížečích, které podporují kulaté rohy přes border-radius, není problém ani zakulacení.

Šířka a výška

• Přenastavení rozměrů je taktéž široce podporováno.
• Problém je s výškou, kdy různé prohlížeče text různě zarovnávají (není možné použít line-height).
• Zarovnat text u širokého <select>u pomocí text-align: center funguje jen v Opeře 12.
• Firefox jako jediný umí nastavit výšku i pro položky výběru.

Písmo

Ohledně písma lze nastavit prakticky vše — tučné písmo, kursivu apod., velikost, barvu (jak je zmíněno výše), atd.

Opět to je možné kromě Firefoxu jen pro celý výběr, tj. pro <select>.

Zvýraznění položky

Při najetí na <select> lze klasicky aplikovat :hover. Otevřený <select> získává :focus.

• V Explorerech do verse 9 včetně nefunguje :hover, do verse 8 včetně ani :focus.
• Nastavit vlastní styl pro :hover jednotlivých položek se zdá být nemožné.

Vlastní styl šipky

Standardním způsobem není možné změnit styl šipky znázorňující rozevření seznamu (například jí změnit barvu).

Existují ale způsoby, jak to obejít:

appearance: none

CSS vlastnost appearance nastavená na hodnotu none dokáže vypnout výchozí styl formulářového políčka. Tím se mimo jiné docílí, že se nezobrazí šipka pro rozevření.

Vlastní šipku jde potom snadno absolutně naposicovat na požadované místo. Šipka jde vytvořit i přímo v CSS:

Aby na místě posicované šipky šlo <select> prokliknout, je třeba přidat pointer-events: none.

Samostatná ukázka

Závěr

Jak je vidět, stylování je docela omezené. Pro plnou kontrolu je třeba použít atrapu a <select> ovládat JavaScriptem. Problém je, že vytvořit funkčnost shodnou s obyčejným formulářem je docela komplikované. A hotová řešení často věci jako ovládání klávesnicí apod. neumožňují.

Problémům se stylováním se jde často úplně vyhnout, protože selectbox není úplně ideální formulářový prvek a často jde nahradit uživatelsky příjemnějším ovládacím prvkem:

Odkazy jinam

• jQuery UI: Selectmenu
• Cross-browser styles for consistent select element styling (demo)