CSS 如何设置 asp.net 下拉列表的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18952736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style asp.net dropdownlist
提问by Sasidharan
You may feel it is a repeated question, but I have a Asp:DropDownList which needs to be styled like the below picture.
你可能觉得这是一个重复的问题，但我有一个 Asp:DropDownList 需要像下图一样设置样式。
I browsed through Google and some sites (mentioned in Stack), but I couldn't get the expected outcome.
我浏览了谷歌和一些网站（在 Stack 中提到），但我无法得到预期的结果。
Can anybody help me in this?
有人可以帮我吗？
Thanks in advance..
提前致谢..
回答by Arun Bertil
Try the following code
试试下面的代码
HTML
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
CSS
编辑
<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.
检查我在 Chrome 中获得的屏幕截图，我还附上了下拉箭头图像（Arrowhead-Down-01.png）。希望这对您有所帮助。
Screenshot
截屏
Arrowhead-Down-01.png
Arrowhead-Down-01.png
回答by Arun Bertil
HTML select solution
HTML 选择解决方案
HTML
HTML
<div class="styled-select">
<select>
<option>DEPART FROM</option>
<option>DEPART TO</option>
<option>DEPART AWAY</option>
</select>
</div>
CSS
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;
}
