Thay đổi màu nền tùy chọn hộp chọn

Tôi có một selecthộp và tôi đang cố gắng thay đổi màu nền của các tùy chọn khi selecthộp đã được nhấp và hiển thị tất cả các tùy chọn.

Xem Fiddle

HTML:

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS:

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

Bạn cần phải đặt background-colortrên optionthẻ và không phải là selectthẻ ...

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

Nếu bạn muốn tạo kiểu cho từng optionthẻ .. hãy sử dụng công attributecụ chọn css :

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}

<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

Tôi không biết bạn đã xem xét nó hay chưa nhưng nếu ứng dụng của bạn dựa trên việc tô màu các nhóm mục khác nhau, bạn có thể nên sử dụng <optgroup>thẻ cùng với một lớp để tham khảo thêm. Ví dụ:

<select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

và sau đó trong đầu tài liệu của bạn viết css như sau:

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>

Có, bạn có thể thiết lập điều này theo cách đối lập bằng cách sử dụng điều này,

option:not(:checked) { }

kiểm tra điều này demo jsFiddle

HTML

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#FFF;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) { 
    background-color: white; 
    color:#000;
}

Tương tự như một số câu trả lời, nhưng không thực sự được nêu rõ, là thêm một lớp vào thẻ tùy chọn thực tế và sử dụng các lớp css ... điều này hiện đang hoạt động đối với tôi mà không có vấn đề gì trên IE (xem ở trên ss).

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS:

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}

Lựa chọn của tôi sẽ không tô màu nền cho đến khi tôi thêm! Điều quan trọng là phong cách.

    input, select, select option{background-color:#FFE !important}

Nếu bạn thực sự muốn tạo kiểu bên trong a, hãy cân nhắc chuyển sang trình đơn thả xuống dựa trên Javascript / CSS chẳng hạn như http://getbootstrap.com/2.3.2/components.html#dropdowns hoặc https://silviomoreto.github.io/ bootstrap-select /amples / . Điều này bởi vì các trình duyệt như IE không cho phép tạo kiểu các tùy chọn trong các phần tử . Chrome / OSX cũng có vấn đề này - bạn không thể tùy chọn kiểu.

Tuy nhiên, một cảnh báo được đính kèm với cách tiếp cận đó. Các loại menu này hoạt động rất khác nhau trên nền tảng di động vì các yếu tố gốc không được sử dụng. Họ cũng có thể có những câu hỏi khó chịu trên máy tính để bàn. Lời khuyên của tôi là 1) không viết thư của riêng bạn và 2) tìm một thư viện đã được thử nghiệm thực sự tốt.

Đây là những gì tôi đã học được về chủ đề này!

Đặc tả CSS 2 không giải quyết được vấn đề về cách các phần tử biểu mẫu nên được hiển thị cho người dùng khoảng thời gian!

Đọc ở đây: tạp chí đập vỡ

Cuối cùng , bạn sẽ không bao giờ tìm thấy bất kỳ bài báo kỹ thuật nào từ w3c hoặc các bài báo khác liên quan đến chủ đề này. Các phần tử biểu mẫu tạo kiểu cụ thể là các hộp chọn không được hỗ trợ đầy đủ, tuy nhiên, bạn có thể lái xe xung quanh ... với một số nỗ lực!

Tạo kiểu cho các phần tử biểu mẫu HTML

Xây dựng các tiện ích tùy chỉnh

Đừng lãng phí thời gian với các vụ hack, hãy đọc các liên kết và tìm hiểu cách các chuyên gia hoàn thành công việc!

Đơn giản chỉ cần thay đổi màu bg

select { background: #6ac17a; color:#fff; }

Một tùy chọn khác là sử dụng Javascript:

if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';

(Không rõ ràng như bộ chọn thuộc tính CSS, nhưng mạnh mẽ hơn)

$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

thêm $htmlIngressCssphần html của bạn :)