Background-color для селекта

294

06 мая 2017, 22:33

Как задать фон селекта в зависимости от выбранного элемента? Например если сделать так

#some-select option:first-child{
  background-color: #FFEBFA;
}

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

Answer 1

В данный момент с помощью css это сделать нельзя, но в будущем будет доступен псевдо-класс :has(), которым по задумке можно будет воспользоваться так:

select:has(> .red:checked)
{
    background: red;
}

Что означает, если элемент select является родителем выбранного элемента с классом red(в вашем случае option), то описуем для него стили.

https://drafts.csswg.org/selectors-4/#relational

С помощью jquery это можно сделать примерно так:

$('.select').change(function() { 
		var selectedColor = $('.select option:selected').val(); 
		$('.select').css('background', selectedColor); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select class="select"> 
        <option selected="selected" value="--">--</option> 
        <option value="red">red</option> 
        <option value="green">green</option> 
        <option value="blue">blue</option> 
        <option value="grey">grey</option> 
    </select>