Jan 15 2008
HTML select with background (image or icon next to text)
I’ve found out a nice article on how to place an icon or image next to a select option. This is the sample css:
<select name=”issuetype” id=”issuetype”>
<option value=”1″ class=”imagebacked” style=”background-image: url(/images/icons/bug.gif);” selected>
Bug
</option>
<option value=”2″ class=”imagebacked” style=”background-image: url(/images/icons/newfeature.gif);”>
New Feature
</option>
<option value=”3″ class=”imagebacked” style=”background-image: url(/images/icons/task.gif);”>
Task
</option>
<option value=”4″ class=”imagebacked” style=”background-image: url(/images/icons/improvement.gif);”>
Improvement
</option>
</select>
option.imagebacked {
padding: 2px 0 2px 20px;
background-repeat: no-repeat;
background-position: 1px 2px;
vertical-align: middle;
}
Here’s an example:
EDIT: actual dropdown
Default
Small Fonts
Big Fonts
June 29th, 2009 at 6:10 am
This does not work at all. Why did not you rendered actual drop down instead of pasting image here. Hmm
June 29th, 2009 at 8:39 am
Here’s the working version too. Take care to the ” you find in the text, they were changed to windows style ones, and screwed up all the css!
July 6th, 2009 at 5:02 pm
Since this doesn’t work in IE, what is the point?
March 11th, 2010 at 10:54 am
Since IE is not a web browsers rear end, who cares?