How to add background-image onto the first option of a dropdownlist

Question

I have the dropdownlist like this one :

<asp:dropdownlist ID ="ddlgender" runat="server">
      <asp:ListItem Text="--Please Select--" Value="0"></asp:ListItem>
      <asp:ListItem Text="Male" Value="1"></asp:ListItem> 
      <asp:ListItem Text="Female" Value="2"></asp:ListItem>
      <asp:ListItem Text="Unknown" Value="3"></asp:ListItem>    
    </asp:dropdownlist>

I want to add small background image to the first option of the dropdownlist before the text : -- Please Select -- ; indicating user that the dropdownlist box must be selected before submitting the form. I have done this kind of stuff in textboxes with css which is very easy , but I dont know how to do it with dropdownlist. Any hint or suggestions are really really appreciated. Thanks Experts

Answer 1

as far as i know unless you build a composite control you can't add images to select menus.

however, this article may help you: http://v2.easy-designs.net/articles/replaceSelect/

Answer 2

Dropdown menus, like checkboxes and radio buttons are generally drawn directly as operating system widgets. This makes it rather difficult to style them using CSS in most cases.

If this is essential then the whole select element will need to be replaced with a pure css and javascript implemenation.

Answer 3

Check this out as well