Змініть колір тла вибору опції

У мене є selectвікно, і я намагаюся змінити колір тла параметрів після selectнатискання на поле та показує всі параметри.

Дивіться 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);
}

Вам потрібно покласти background-colorна optionтезі , а не selectтег ...

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

Якщо ви хочете стилізувати кожен із optionтегів .. скористайтеся attributeселектором 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>

Я не знаю, розглядали ви це чи ні, але якщо ваша програма заснована на розфарбовуванні різних груп предметів, ви, ймовірно, повинні використовувати <optgroup>тег у поєднанні з класом для подальшого посилання. Наприклад:

<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>

а потім в голову документа напишіть css так:

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

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

Так, ви можете встановити це протилежним способом, використовуючи це,

option:not(:checked) { }

Перевір це 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;
}

Подібно до деяких відповідей, але насправді не зазначено, це додати клас до фактичного тегу параметрів та використовувати класи css ... це зараз працює для мене без проблем на IE (див. Вище сс).

<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;
}

Мій вибір не забарвлює фон, поки я не додав важливого стилю.

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

Якщо ви дійсно хочете стилізувати інтервал a, подумайте про перехід на спадний файл на основі Javascript / CSS, наприклад http://getbootstrap.com/2.3.2/components.html#dropdowns або https://silviomoreto.github.io/ bootstrap-select / example / . Це тому, що браузери, такі як IE , не дозволяють стилізувати параметри всередині елементів . У Chrome / OSX також є ця проблема - ви не можете налаштувати стиль.

Однак до цього підходу додається попередження. Ці типи меню працюють дуже по-різному на мобільних платформах, тому що вбудовані елементи не використовуються. Вони можуть мати набридливі примхи і на робочому столі. Моя порада: 1) не пишіть свою власну і 2) знайдіть бібліотеку, яка справді добре перевірена.

Ось мова йде про те, що я дізнався про цю тему!

Специфікація CSS 2 не вирішила проблеми того, як елементи форми повинні бути представлені користувачам періоду!

Читайте тут: розгромний журнал

Врешті-решт , ви ніколи не знайдете жодної технічної статті з w3c або іншої адреси до цієї теми. Елементи стилів форми, зокрема коробки вибору, не підтримуються повністю, проте ви можете їздити навколо ... з деякими зусиллями!

Стилізація елементів форми HTML

Створення спеціальних віджетів

Не витрачайте час на хакі. Прочитайте посилання та дізнайтеся, як професіонали впораються з роботою!

Просто змініть колір bg

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

Іншим варіантом є використання Javascript:

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

(Не такий чистий, як селектор атрибутів CSS, але більш потужний)

$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>';

додайте $htmlIngressCssу вашу html-частину :)