Friday, April 30, 2010

Display images as options in select box

styles
option.imagebacked {
padding: 0px 60px 65px; /* 60px and 65px are the images width and heigh values */
background-repeat: no-repeat;
/* background-position: 0px 60px 65px; */
vertical-align: middle;
}

<select name="issuetype" id="issuetype" style="height: 20px;">
<option value="1" class="imagebacked" style="background-image: url(http://ecx.images-amazon.com/images/I/51xW5d95RjL._SL75_.jpg);"> Bug </option>
<option value="2" class="imagebacked" style="background-image: url(http://ecx.images-amazon.com/images/I/51joflCZefL._SL75_.jpg);"> New Feature </option>
</select>

Reference
http://technology.amis.nl/blog/994/html-select-item-with-icons-in-addition-to-just-text-labels-applying-the-css-background-style-to-the-html-option-element

No comments: