Wie man asp.net dropdownlist style

Question

Sie können glauben, dass es eine wiederholte Frage ist, aber ich habe eine Asp: DropDownList, die wie das folgende Bild gestylt werden muss.

Ich blätterte durch Google und einige Websites (in Stack erwähnt), aber ich konnte nicht das erwartete Ergebnis erhalten.

Kann mir jemand dabei helfen?

Vielen Dank im Voraus ..

Answer 1

Versuchen Sie, den folgenden 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> 

Überprüfen Sie den Screenshot, den ich in Chrome bekam auch bin Befestigung ich das Drop-Down-Down-Bild Pfeil (Pfeilspitze Down-01.png) .Hope dies hilft Ihnen.

Screenshot

Arrowhead Down-01.png

Answer 2

HTML select Lösung

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