Thay đổi Chọn Danh sách Màu nền tùy chọn khi di chuột

Question

Có thể thay đổi màu nền mặc định của tùy chọn danh sách chọn khi di chuột không?

HTML:

<select id="select"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
</select> 

Tôi đã thử option:hover { background-color: red; }, nhưng nó là không sử dụng. Có ai biết làm thế nào để làm điều này?

Answer 1

Lựa chọn/Các yếu tố tùy chọn được hiển thị bởi hệ điều hành, không phải HTML. Bạn không thể thay đổi kiểu cho các thành phần này.

Answer 2

Điều này có thể được thực hiện bằng cách thực hiện một bóng hộp inset. ví dụ:

select.decorated option:hover { 
    box-shadow: 0 0 10px 100px #1882A8 inset; 
} 

Ở đây, .decorated là một lớp được gán cho hộp chọn.

Hy vọng bạn có điểm.

Answer 3

đây là những gì bạn cần, các combinator con:

select>option:hover 
    { 
     color: #1B517E; 
     cursor: pointer; 
    } 

Hãy thử nó, hoạt động hoàn hảo.

Dưới đây là tài liệu tham khảo: http://www.w3schools.com/css/css_combinators.asp

Answer 4

Tôi nhận ra đây là một câu hỏi cũ, nhưng gần đây tôi đi qua nhu cầu này và đã đưa ra các giải pháp sau đây sử dụng jQuery và CSS:

jQuery('select[name*="lstDestinations"] option').hover(
     function() { 
      jQuery(this).addClass('highlight'); 
     }, function() { 
      jQuery(this).removeClass('highlight'); 
     } 
    ); 

và css :

.highlight { 
    background-color:#333; 
    cursor:pointer; 
} 

Có lẽ điều này sẽ giúp người khác.

Answer 5

Thực hiện một hình chữ nhật hộp bóng CSS hoạt động trên Firefox:

select option:checked, 
select option:hover { 
    box-shadow: 0 0 10px 100px #000 inset; 
} 

Kiểm tra tùy chọn mục làm việc trong Chrome:

select:focus > option:checked { 
    background: #000 !important; 
} 

Answer 6

Trong FF cũng lọc CSS hoạt động tốt. Ví dụ. hue-xoay:

option { 
    filter: hue-rotate(90deg); 
} 

https://jsfiddle.net/w3a740jq/4/

Answer 7

Vấn đề là không thậm chí Javascript không thấy các yếu tố option được bay lượn. Đây chỉ là đặt trọng tâm vào nó như thế nào sẽ không được giải quyết (trong thời gian tới ít nhất) bằng cách sử dụng chỉ CSS:

window.onmouseover = function(e) 
{ 
console.log(e.target.nodeName); 
} 

Các chỉ cách để giải quyết vấn đề này (bên cạnh chờ đợi một thiên niên kỷ cho các nhà cung cấp trình duyệt để khắc phục lỗi, hãy để một mình làm ảnh hưởng đến những gì bạn đang cố gắng làm) là thay thế trình đơn thả xuống bằng HTML/XML của riêng bạn bằng JavaScript. Điều này có thể liên quan đến việc sử dụng phần tử select thay thế bằng phần tử ul và việc sử dụng phần tử radioinput trên mỗi phần tử li.