How to style asp.net dropdownlist

Question

You may feel it is a repeated question, but I have a Asp:DropDownList which needs to be styled like the below picture.

I browsed through Google and some sites (mentioned in Stack), but I couldn't get the expected outcome.

Can anybody help me in this?

Thanks in advance..

Answer 1

Try the following code

HTML

<asp:DropDownList ID="DropDownList1" runat="server" Width="120px" BackColor="#F6F1DB" ForeColor="#7d6754" Font-Names="Andalus" CssClass="ddl">
    <asp:ListItem Text="DEPART FROM"></asp:ListItem>
</asp:DropDownList>

CSS
EDIT

<style type="text/css">
        .ddl
        {
            border:2px solid #7d6754;
            border-radius:5px;
            padding:3px;
            -webkit-appearance: none; 
            background-image:url('Images/Arrowhead-Down-01.png');
            background-position:88px;
            background-repeat:no-repeat;
            text-indent: 0.01px;/*In Firefox*/
            text-overflow: '';/*In Firefox*/
        }
</style>

Check the screenshot which I got in Chrome also I am attaching the dropdown down arrow image(Arrowhead-Down-01.png).Hope this helps you.

Screenshot

Arrowhead-Down-01.png