Software utilities

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

Sometimes when using IE6/IE7 a text will disappear, it will seem to be there but you won’t see it unless you highlite it. It’s called Peekaboo bug, some report it was corrected in IE7 but it doesn’t seem so to me.

How to solve the Peekaboo bug?

A solution is to add position:relative; to the containing div. It solved this issue for me. If you have any other solution feel free to post it!

Other resources: http://www.brownbatterystudios.com/s.. http://www.zeldman.com/2006/…

I found a very nice discussion about Google rounded corners, which describes a way to get rounded corners from a dynamic page in Google groups. Doesn’t seem to me a good choice to rely your website design on an external tool, especially because in that url you can see the word beta, not a synonym of stability and reliability! It could be a nice starting point, you could create your own rounded corner creator just save those images for future use. Happy designing!