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)

  prvni
  druhy
  treti

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

Barvy

  --- vybrat ---
  prvni
  druhy
  treti

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)

  --- vybrat ---
  prvni
  druhy
  treti

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

Šířka/výška

  --- vybrat ---
  prvni
  druhy
  treti

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

  --- vybrat ---
  prvni
  druhy
  treti

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".

  

    
        První
        Druhá
        Třetí
    
  
  

<< zpět