Tôi làm cách nào để tạo kiểu danh sách thả xuống?

Question

Tôi đã tìm kiếm rất nhiều trên Internet nhưng không tìm thấy gì hữu ích về cách tạo kiểu cho phần thả xuống của danh sách thả xuống trong biểu mẫu. Tôi sẽ đánh giá cao một con trỏ đi đúng hướng. Cảm ơn.

Answer 1

Như đã đề cập ở trên, có khá nhiều điều không thể làm khi sử dụng html thẳng, tôi đã có kết quả tốt với jQuery Combobox.

Answer 2

Bạn có thể áp dụng kiểu bằng cách sử dụng bộ chọn SELECT hoặc áp dụng tên lớp cho phần tử SELECT. Tuy nhiên, bạn sẽ gặp phải sự cố với IE < 8 áp dụng những thứ như đường viền cho phần tử.

Sau đó, bạn có thể nhắm mục tiêu tùy chọn bằng cách sử dụng công cụ chọn TÙY CHỌN.

SELECT { border: solid 1px red; font-weight: bold; } 
OPTION { background:green; font-style: italic; } 

Nên cung cấp cho bạn danh sách thả xuống có đường viền màu đỏ (nếu sử dụng FF hoặc IE8 ở chế độ Chuẩn) với văn bản in đậm và các tùy chọn phải in nghiêng với nền màu xanh lá cây.

Answer 3

Có thể, nhưng phức tạp để nói ít nhất. Bạn có thể không thực sự phong cách phần thả xuống của một danh sách thả xuống nhất quán trên các trình duyệt khác nhau khi tất cả chúng đều hỗ trợ chúng theo những cách khác nhau (tôi có nghĩa là hỗ trợ thực sự đa dạng).

Khi tôi đã có một problam như thế này một vài tháng trước, giải pháp duy nhất tôi tìm thấy là, bằng cách sử dụng javascript, chuyển đổi danh sách thả xuống vào một trình đơn thả xuống ul/li, mà tôi có thể tạo kiểu. Tất nhiên có rất nhiều sự kiện cần xử lý, như chọn một giá trị.

May mắn là có một plugin cho JQuery cho phép đây là một nhiệm vụ tầm thường. (Liên kết Brainfault đã cho plugin này không hoạt động nữa.)

Answer 4

Tôi đã làm việc trên cùng một vấn đề trong một thời gian. Đến với một giải pháp khá đơn giản bằng cách sử dụng một div chủ đó là ngắn hơn sau đó thả xuống chính nó. Tôi cũng sử dụng hình nền để lấy mũi tên thả xuống để tìm cách tôi thích. Kiểm tra xem nó ra http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

Tất cả những gì bạn cần là một div xung quanh thẻ được chọn và 2 lớp CSS.

HTML:

<div class="mainselection"> 
<select name="State" id="input7"> 
    <option></option> 
    <option value="Alabama">Alabama</option> 
    ... 
    <option value="Wisconsin">Wisconsin</option> 
    <option value="Wyoming">Wyoming</option>        
</select> 
</div> 

CSS:

.mainselection { 
    overflow:hidden; 
    width:350px; 
    margin-left:35px; 
    background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px; 
    /* dropdown_arrow.png is a 31x28 image */ 
} 
select { 
    border:0; 
    background:transparent; 
    height:32px; 
    border:1px solid #d8d8d8; 
    width:350px; 
    -webkit-appearance: none; 
} 

Sau đó, sau khi xác minh Javascript nhỏ, tôi cũng có thể chuyển đổi các lớp trên div để .dropdownbad để cho nó một đường viền màu đỏ.

.dropdownbad { 
    border:2px solid #c13339; 
} 

Các trạng thái mặc định và lỗi được hiển thị ở đây:

Answer 5

Kể từ khi câu hỏi này được hỏi, công nghệ trình duyệt đã xa được cải thiện. Bây giờ bạn có thể tạo một menu thả xuống tùy chỉnh hoàn toàn bằng cách sử dụng CSS không có javascript.

Kiểm tra bài viết trên blog này: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 6

Tôi có Dropdowns trong giỏ của tôi mà là ánh sáng màu xám nếu không được chọn.Tôi đã có thể chuyển văn bản màu đen bằng cách này:

#customer_details ul { 
color: black !important; 
} 

Đó là tất cả những gì tôi cần để thay đổi, vì vậy tôi không thể nói những gì khác bạn có thể làm.

Answer 7

Kiểm tra trang web này cho CSS giải pháp duy nhất: http://www.htmllion.com/default-select-dropdown-style-just-css.html

HTML:

<form> 
    <select> 
     <option>CSS</option> 
     <option>HTML </option> 
     <option>HTML 5</option> 
    </select> 
</form> 

CSS:

<style> 
    select { 
     border: 0 !important; /*Removes border*/ 
     -webkit-appearance: none; /*Removes default chrome and safari style*/ 
     -moz-appearance: none; /* Removes Default Firefox style*/ 
     background: #0088cc url(img/select-arrow.png) no-repeat 90% center; 
     width: 100px; /*Width of select dropdown to give space for arrow image*/ 
     text-indent: 0.01px; /* Removes default arrow from firefox*/ 
     text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/ 
     color: #FFF; 
     border-radius: 15px; 
     padding: 5px; 
     box-shadow: inset 0 0 5px rgba(000,000,000, 0.5); 
    } 
</style>