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?

enter image description here

Thanks in advance..

• Prashant Kankhara: Search for Dropkick.js/dropkick.css files it may help you to design custom style to your dropdownlist in asp.net
• Sasidharan: Nope, I tried dropkick.No use of it.My total design collapses of it.But no change to dropdownlist..
• nu everest: asp-net-example.blogspot.com/2013/12/…

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

enter image description here

Arrowhead-Down-01.png

enter image description here

• Sasidharan: Arun Bertil,Thanks for your effort.I am happy with it.But its working only in chrome,not in IE10,mozilla 23..Is there any make over for that..
• Sasidharan: Again thanks..I tried "-moz-appearance:none"..But it dint work...U did it..Why the heck IE is making a mess in all concerns..
• Arun Bertil: yes...there is issue in IE...let me chk if there is any workaround...:):)...happy to know it helped u..
• Arun Bertil: i hvae got a html select workaround which works in all browsers...with the way you want is it ok..then I will post?
• Sasidharan: Yes please go ahead..BUt make sure dont remove the current one,post that along with this..

Answer 2

HTML select solution

HTML

<div class="styled-select">
 <select>
 <option>DEPART FROM</option>
 <option>DEPART TO</option>
 <option>DEPART AWAY</option>
 </select>
</div>

CSS

 .styled-select {
 width: 150px;
 height: 30px;
 overflow: hidden;
 background: url('Images/Arrowhead-Down-01.png') no-repeat right #F6F1DB;
 border: 2px solid #7d6754;
 border-radius: 5px;
 }
 .styled-select select {
 background: transparent;
 width: 180px;
 padding: 3px;
 font-size: 16px;
 line-height: 1;
 border: 0;
 border-radius: 0;
 height: 30px;
 -webkit-appearance: none;
 font-family:Andalus;
 color:#7d6754;
 }