Danes vam bom pokazal, kako se naredi uporabniku prijaznejši select box, ki ima zraven izbir še ikone. Izdelava pravzaprav sploh ni težka.

HTML koda je enaka, kot če bi pisali kodo za navaden select box, razlikuje se le v tem, da navedemo pot do slike v ozadju izbire:
<select id="blogi">
<option style="background-image: url('http://ferme.si/favicon.ico');">ferme.si</option>
<option style="background-image: url('http://had.si/favicon.ico');">had.si</option>
<option style="background-image: url('http://zakladi.com/blog/favicon.ico');">zakladi.com</option>
</select>Pri CSS-ju pa moramo nastaviti par stvari, da se slika pravilno prikaže… višino slike, odmik besedila od levega roba (drugače je besedilo preko slike) ter ponavljanje slike v ozadju:
#blogi option { /* višina slike */ height: 16px; /* širina slike */ padding-left: 16px; /* preprečimo ponavljanje */ background-repeat: no-repeat; }
Kot rezultat dobimo tole, edina pomanjkljivost je, da se slika izbrane izbire ne pojavi v select boxu poleg izbrane izbire, ampak tudi to pomanjkljivost se da popraviti z nekaj vrsticami JavaScript-a.
Zahteve:
- Firefox


