Thay đổi màu của <option> trong firefox

Tôi đang cố thay đổi màu văn bản của tùy chọn được chọn. Nó hoạt động trong IE nhưng không phải trong Firefox.Thay đổi màu của <option> trong firefox

<html> 
    <head> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("option:selected").css("color", "green"); 
     }); 
     </script> 
</head> 
<body> 
    <select id="mySelect"> 
     <option selected="selected">option 1</option> 
     <option>option 2</option> 
     <option>option 3</option> 
    </select> 
</body> 
</html>

cập nhật

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("select").css("color", "green").focus(function() { 
        $(this).css('color', 'black'); 
       }).blur(function() { 
       $(this).css('color', 'green'); 
      }); 
     }); 
     </script> 
</head> 
<body> 
    <select id="mySelect"> 
     <option selected="selected">option 1</option> 
     <option>option 2</option> 
     <option>option 3</option> 
    </select> 
</body> 
</html>

CẬP NHẬT 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      select.green{ 
       color: green; 
      } 
      option { 
       color: black; 
      } 
     </style> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var green = $('option:selected', 'select').data('green'); 
       if (green) { 
        $('select').addClass('green'); 
       } 
       $('select').change(function() { 
        var green = $('option:selected', this).data('green'); 
        if (green) { 
         $('select').addClass('green'); 
        } 
        else { 
         $('select').removeClass('green'); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <select id="mySelect"> 
      <option selected="selected" data-green="true">option 1</option> 
      <option>option 2</option> 
      <option>option 3</option> 
     </select> 
    </body> 
</html>

Nguồn

2012-02-22 techlead

Tôi muốn màu đỏ cho tùy chọn đã chọn chỉ khi DOM đã tải. Vì vậy, các mã trên nên được tốt nhưng nó không hoạt động trong FF. – techlead

Tôi đã tạo bản trình diễn cho bạn. http://jsfiddle.net/R8aPY/ Trong Chrome và Firefox, tùy chọn 1 có màu xanh lục khi bạn mở menu thả xuống. –

Bạn có nghĩa là màu xanh lá cây?Xin lưu ý rằng sau khi người dùng thay đổi lựa chọn của mình, nó sẽ không cập nhật màu cho phần tử mới được chọn. – MMM

Hãy xem ở đây:

http://benalman.com/code/projects/jquery-misc/examples/selectcolorize/

Theo mặc định, chọn các phần tử trong Internet Explorer và Opera hiển thị màu và màu nền của tùy chọn được chọn, trong khi trình duyệt Firefox và WebKit thì không. jQuery selectColorize bình thường hóa hành vi này trình duyệt chéo cho kiểu dáng hộp chọn màu cơ bản, mà không cần phải khu nghỉ mát để chọn thêm "ưa thích" chọn hộp thay thế.

Nguồn

2012-02-22 22:09:11

Tôi không muốn màu của tùy chọn 1 được đặt thành màu xanh lá cây trên sự kiện 'thay đổi'. Vui lòng đọc lại câu hỏi/nhận xét. Tôi muốn tùy chọn 1 thành màu xanh lục khi trang tải. – techlead

tất cả các phần tử trong danh sách là đơn sắc trong firefox 52.0.2 (64-bit) – GPR

Điều này có thể không phải là giải pháp bạn đang tìm kiếm nhưng bạn có thể làm điều đó trong css:

option[selected] { 
    color: green; 
}

chỉ này hoạt động với các trình duyệt có hỗ trợ thuộc tính selectors (IE7 +)

EDIT: Sau khi đọc bình luận của bạn, tôi hiểu những gì bạn muốn đạt được. Bạn muốn làm cho màu xanh lá cây select VÀ phần tử đã chọn (option) màu xanh lục (và phần còn lại là màu đen). Bạn có thể thực hiện việc này bằng cách sử dụng mã css sau:

select { 
    color: green; 
} 

option[selected] { 
    color: green; 
} 

option { 
    color: black; 
}

Xem JSFiddle của tôi. Tuy nhiên, màu sắc sẽ không thay đổi sau khi bạn chọn một tùy chọn khác.

Nguồn

2012-02-22 22:12:14 MMM

tính năng này không hoạt động. – techlead

Có nó không ...? Cái gì không hiệu quả? – MMM

Không có trong Firefox ... tất cả các phần tử tùy chọn đều có màu đen trắng khi ddl mở, luôn luôn. – GPR

Vì vậy, bạn muốn chọn màu xanh lục khi "tùy chọn 1" được chọn, nhưng không phải khi người khác chọn?

Tôi đề xuất thêm thuộc tính vào "tùy chọn 1", vì vậy bạn biết đó là thuộc tính phải có màu xanh lục và sau đó chuyển đổi lớp học khi chọn thay đổi.

Vì vậy, thay đổi HTML của bạn sẽ được này:

<select id="mySelect"> 
    <option selected="selected" data-green="true">option 1</option> 
    <option>option 2</option> 
    <option>option 3</option> 
</select>

Thêm phần này vào CSS của bạn:

select.green{ 
    color: green; 
} 
option { 
    color: black; 
}

Và thử JavaScript này:

$(function(){ 
    var green = $('option:selected', 'select').data('green'); 
    if (green) { 
     $('select').addClass('green'); 
    } 


    $('select').change(function() { 
     var green = $('option:selected', this).data('green'); 
     if (green) { 
      $('select').addClass('green'); 
     } 
     else { 
      $('select').removeClass('green'); 
     } 
    }); 
});

DEMO: http://jsfiddle.net/UyxaT/3/

Nguồn

2012-02-22 23:13:06

Vui lòng xem mã được cập nhật trong 'UPDATED 2'. Mặc dù bản demo hoạt động, tôi đã thử nó trong FF 9.0.1 và IE 8. Nó không hoạt động trong bất kỳ trình duyệt nào. – techlead

@ SK11: Hoạt động với tôi trong Chrome 18, FF 10. Có vẻ như không hoạt động trong IE 9. Kiểu dáng '

Thay đổi màu của <option> trong firefox

Trả lời