Sunday, July 13, 2008

How To Put Image In Dropdown, Option, Select

take this CSS

select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}

some explanation :
if your image too wide, please modify padding-left value~


then, use this dropdown technique

<label for="some_countries">Straight Forward</label>
<select name="some_countries" id="some_countries"
class="icon-menu">
<option style="background-image:url(img/usa.png);" value="US">USA</option>
<option style="background-image:url(img/india.png)" value="IN">India</option>
</select>
some explanation :
every option has it own image, make sure that the image is there~

No comments: