Как изменить цвет фона в окне выбора?

У меня есть поле выбора, и я пытаюсь изменить цвет фона параметров, когда в поле "Выбор" щелкнули все параметры.

См скрипка

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);
}
Источник

10 ответов

Решение

Вам нужно поставить 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 теги.. используйте CSS attribute селектор:

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"] {
  /* value not val */
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  /* value not val */
  background: rgba(200, 200, 200, 0.3);
}
<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>

Источник

Да, вы можете установить это противоположным способом, используя это,

option:not(:checked) { }

проверить это демо 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;
}
Источник

Я не знаю, рассматривали ли вы это или нет, но если ваше приложение основано на раскраске различных групп предметов, вам, вероятно, следует использовать <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 и использовать классы css... это в настоящее время работает для меня без проблем в IE (см. Выше 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;
}
Источник

Мои выборки не будут окрашивать фон, пока я не добавлю! Важно для стиля.

    input, select, select option{background-color:#FFE !important}
Источник

Если вы действительно хотите оформить стили внутри a, рассмотрите возможность перехода на раскрывающийся список на основе Javascript/CSS, например http://getbootstrap.com/2.3.2/components.html или https://silviomoreto.github.io/bootstrap-select/examples/. Это связано с тем, что такие браузеры, как IE , не допускают стилизацию элементов внутри элементов. Chrome/OSX также имеет эту проблему - вы не можете стилизовать опции.

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

Источник

Другой вариант - использовать Javascript:

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

(Не такой чистый, как селектор атрибутов CSS, но более мощный)

Источник

Вот и все, что я узнал об этом предмете!

Спецификация CSS 2 не решает проблему того, как элементы формы должны быть представлены пользователям.

Читайте здесь: Smashing Journal

В конце концов, вы никогда не найдете никакой технической статьи от w3c или другой, адресованной этой теме. Стилизация элементов формы, в частности блоков выбора, поддерживается не полностью, однако вы можете передвигаться... с некоторыми усилиями!

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

Создание пользовательских виджетов

Не тратьте время на хаки, читайте ссылки и узнайте, как профессионалы справляются с работой!

Источник 
$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-части:)

Источник

Просто измените цвет bg

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

Источник
Другие вопросы по тегам