Cách tạo kiểu danh sách thả xuống asp.net

Question

Bạn có thể cảm thấy đây là một câu hỏi lặp lại, nhưng tôi có một Asp: DropDownList cần phải được tạo kiểu như hình bên dưới.

Tôi duyệt qua Google và một số trang web (được đề cập trong Stack), nhưng tôi không thể nhận được kết quả mong đợi.

Ai đó có thể giúp tôi trong việc này không?

Thanks in advance ..

Answer 1

Hãy thử đoạn mã sau

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> 

Kiểm tra các ảnh chụp màn hình mà tôi nhận được trong Chrome cũng Tôi gắn thả xuống xuống mũi tên hình ảnh (Arrowhead-Down-01.png) .Hope này giúp bạn.

Ảnh chụp màn hình

Arrowhead-Down-01.png

Answer 2

HTML chọn giải pháp

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