Garth

Jak stylovat <select> ?

aneb stylování roletky, selectu, ...

Stylování roletky je potřebné velmi často a není nikterak jednoduché. Mnohdy je tedy nutné použít alternativu roletky za pomoci javascriptu atd.. Samotný prvek, ale má několik vlastností, které lze editovat a mohou postačit.

Odsazení (padding)



Funguje od Internet Explorer 8 na značce "select", na "option" umí padding jen Firefox.

Barvy

Roletku lze barvit jako celek, ale i konkrétní "option" položky. Pokud se "option" neobarví, tak si přeberou barvu z "selectu".

Rámeček (border)

Rmečky lze dodat kdykoliv. Lze použít i zakulacení rohů pomocí "border-radius"

Šířka/výška

U výšky může nastat problém s řádkováním, protože nelze nastavovat vlastnost "line-height".

Písmo Lze měnit vše ať již font,tučnost, velikost atd...

Šířka/výška

U výšky může nastat problém s řádkováním, protože nelze nastavovat vlastnost "line-height".


Vlastní vzhled šipky

Šipku běžně nelze měnit a tak je nutné to "obejít".
CSS vlastnost "appearance" nastavená na hodnotu "none" dokáže vypnout výchozí styl formulářového políčka. Tím se základní šipka nezobrazí. Vlastní šipku jde potom snadno absolutně napozicovat na požadované místo. Aby na místě pozicované šipky šlo "select" prokliknout, je třeba přidat vlastnost "pointer-events: none".

  

<< zpět




Nejnovější články