如何设置asp.net下拉列表的样式

Question

您可能会觉得这是一个重复的问题，但我有一个Asp：DropDownList，需要像下面的图片一样设置样式。

我浏览了Google和一些网站（在Stack中提到），但我无法获得预期的结果。

有人可以帮助我吗？

提前致谢..

Answer 1

尝试以下代码

<强> 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
的修改

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

查看我在Chrome中获得的屏幕截图，我还附上了下拉箭头图片（Arrowhead-Down-01.png）。希望这可以帮到你。

<强>截图

<强>慈姑 - 下 - 01.png

Answer 2

HTML选择解决方案

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