Thay đổi màu và hình dạng của mũi tên thả xuống

Question

Tôi muốn thay đổi giao diện mặc định của mũi tên của danh sách thả xuống để trông giống nhau trên các trình duyệt. Có cách nào để ghi đè giao diện mặc định của mũi tên thả xuống bằng CSS hay không?

Answer 1

Không, việc lưu giữ biểu mẫu trên nhiều trình duyệt là rất khó nếu không thể làm cho nó phù hợp với tất cả các trình duyệt. Nếu bạn thực sự quan tâm đến sự xuất hiện của các tiện ích đó, bạn nên sử dụng triển khai javascript.

thấy http://www.456bereastreet.com/archive/200409/styling_form_controls/ và http://developer.yahoo.com/yui/examples/button/btn_example07.html

Answer 2

Yếu tố <select> được tạo ra bởi các ứng dụng và phong cách không phải là một phần của spec CSS/HTML.

Bạn sẽ phải giả mạo nó bằng DIV của riêng bạn và phủ lên nó trên đầu trang hiện tại hoặc xây dựng điều khiển của riêng bạn mô phỏng cùng chức năng.

Answer 3

Không, bạn không thể làm điều đó bằng cách sử dụng <select> thực tế, nhưng có các kỹ thuật cho phép bạn "thay thế" chúng bằng các giải pháp javascript trông đẹp hơn.

Dưới đây là một bài viết tốt về chủ đề này: <select> Something New

Answer 4

Trừ khi bạn có kế hoạch tạo ra thả mình xuống danh sách (và không sử dụng một thư viện chuẩn danh sách thả xuống), bạn đang bị mắc kẹt. Giao diện của điều khiển DDL sẽ dựa trên hệ thống bạn đang chạy và/hoặc trình duyệt hiển thị đầu ra.

Answer 5

Không dễ dàng làm tôi sợ. Vấn đề là Css không thể thay thế mũi tên trong một lựa chọn vì điều này được hiển thị bởi trình duyệt. Nhưng bạn có thể xây dựng một điều khiển mới từ div và các yếu tố đầu vào và Javascript để thực hiện chức năng tương tự như lựa chọn.

Hãy thử xem một số plugin tự động hoàn tất cho Jquery chẳng hạn.

Nếu không có một số thông tin về các yếu tố lựa chọn ở đây:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

Answer 6

Bạn có thể đạt được điều này với CSS nhưng bạn không techinically thay đổi mũi tên riêng của mình.

Trong ví dụ này, tôi thực sự ẩn mũi tên mặc định và hiển thị mũi tên của riêng tôi thay thế.

HTML:

<div class="styleSelect"> 
    <select class="units"> 
    <option value="Metres">Metres</option> 
    <option value="Feet">Feet</option> 
    <option value="Fathoms">Fathoms</option> 
    </select> 
</div> 

CSS:

.styleSelect select { 
    background: transparent; 
    width: 168px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    color: #000; 
} 

.styleSelect { 
    width: 140px; 
    height: 34px; 
    overflow: hidden; 
    background: url("images/downArrow.png") no-repeat right #fff; 
    border: 2px solid #000; 
} 

Answer 7

Chúng tôi đã sử dụng YUI, Chosen, và hiện đang sử dụng các plugin jQuery Select2: https://select2.github.io/

Nó khá mạnh mẽ, mũi tên là chỉ là đỉnh của tảng băng trôi.

Ngay sau khi các lựa chọn được cách điệu trở thành yêu cầu, tôi đồng ý với các yêu cầu khác, đi kèm với plugin. Đừng giết chính mình phát minh lại bánh xe.

Answer 8

Nó có thể được thực hiện bằng cách:

select{ 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; 
} 

select{ 
 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; 
 
    
 
    
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0px; 
 
    appearance: none; 
 
    outline-width: 0; 
 
    
 
    padding: 10px 10px 10px 5px; 
 
    display: block; 
 
    width: 10em; 
 
    border: none; 
 
    font-size: 1rem; 
 
    
 
    border-bottom: 1px solid #757575; 
 
    }

<div class="styleSelect"> 
 
    <select class="units"> 
 
    <option value="Metres">Metres</option> 
 
    <option value="Feet">Feet</option> 
 
    <option value="Fathoms">Fathoms</option> 
 
    </select> 
 
</div>

Answer 9

Hãy thử thay đổi màu sắc của bạn "border-top" thuộc tính sang màu trắng