How to style asp.net dropdownlist
90,460
Solution 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
Solution 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;
}
Related videos on Youtube
Comments
-
Sasidharan over 3 years
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..
-
Sasidharan over 10 yearsArun 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 over 10 yearsAgain 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 over 10 yearsyes...there is issue in IE...let me chk if there is any workaround...:):)...happy to know it helped u..
-
Arun Bertil over 10 yearsi hvae got a html select workaround which works in all browsers...with the way you want is it ok..then I will post?
-
Sasidharan over 10 yearsYes please go ahead..BUt make sure dont remove the current one,post that along with this..