Jak style asp.net dropdownlist

Question

Możesz poczuć, że jest to powtarzające się pytanie, ale mam Asp: DropDownList, który musi być stylizowany jak na poniższym obrazku.

Przeglądałem przez Google i niektóre witryny (wspomniane w Stack), ale nie mogłem uzyskać oczekiwanego rezultatu.

Czy ktoś może mi w tym pomóc?

góry dzięki ..

Answer 1

Spróbuj następujący kod

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> 

zobacz zrzut ekranu, który mam w Chrome również Ja załączając listy rozwijanej strzałka w dół obrazu (Arrowhead-Down-01.png) .Hope to pomaga.

Zrzut

Arrowhead-Down-01.png

Answer 2

HTML wybierz rozwiązanie

HTM L

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