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

Question

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

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

Посмотреть Скрипка

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

}

639 10

html css background-color

10 ответов:

Comments

Ничего не найдено.

udidu · Accepted Answer · 2017-01-16 16:18:07

нужно поставить 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);
}

/* ... */

rfoo · Accepted Answer · 2013-03-21 23:30:41

Я не знаю, рассматривали ли вы это или нет, но если ваше приложение основано на раскраске различных групп элементов, вы, вероятно, должны использовать <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>

Jay Patel · Accepted Answer · 2014-03-20 12:37:31

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

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

dah97765 · Accepted Answer · 2013-10-09 00:21:52

подобно некоторым ответам, но на самом деле не указано, чтобы добавить класс к фактическому тегу опции и использовать классы 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;
}

Charlie Dalsass · Accepted Answer · 2017-05-23 14:33:24

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

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

Chintan · Accepted Answer · 2017-08-02 12:18:22

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

Thomas Mathew · Accepted Answer · 2018-05-07 09:32:14

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

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

Travis · Accepted Answer · 2012-10-11 23:53:09

другой вариант - использовать Javascript:
if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';
(Не так чисто, как селектор атрибутов CSS, но более мощный)

Bob Brunius · Accepted Answer · 2016-07-28 22:26:46

мои выбирает не будет цвет фона, пока я не добавил !это важно для стиля.
    input, select, select option{background-color:#FFE !important}

obinoob · Accepted Answer · 2017-12-05 21:15:17

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

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

читать здесь:smashing magazine

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

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

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

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