11

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..

3

2 Answers 2

27

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

5
  • 1
    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
    Sep 23, 2013 at 6:56
  • 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..
    – Sasidharan
    Sep 23, 2013 at 7:23
  • yes...there is issue in IE...let me chk if there is any workaround...:):)...happy to know it helped u.. Sep 23, 2013 at 7:25
  • i hvae got a html select workaround which works in all browsers...with the way you want is it ok..then I will post? Sep 23, 2013 at 7:37
  • Yes please go ahead..BUt make sure dont remove the current one,post that along with this..
    – Sasidharan
    Sep 23, 2013 at 7:41
5

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;
   }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.