По умолчанию серый и выбранный элемент зеленым

Question

У меня есть меню.

<select class="empty"> 
    <option value="" selected disabled>Please select</option> 
    <option value="1">Item 1</option> 
    <option value="2">Item 2</option> 
    <option value="3">Item 3</option> 
</select> 

select.empty { 
    color: grey; 
} 
select.option{ 
    color:green; 
} 

Я хочу иметь первый вариант в grey. Так что это похоже на местозаполнитель. Теперь, когда пользователь выбирает параметр, как я могу сделать текст зеленым? На данный момент это grey.

Answer 1

использование, как это тестирование в хроме также работает отлично

select option[disabled=""] { 
    color:grey; 
} 
select option{ 
    color:green; 
} 

благодаря надеюсь, что это помогает

Snippet

select option[disabled=""] { 
 
    color:grey; 
 
} 
 
select option{ 
 
    color:green; 
 
}

<select class="empty"> 
 
    <option value="" selected disabled>Please select</option> 
 
    <option value="1">Item 1</option> 
 
    <option value="2">Item 2</option> 
 
    <option value="3">Item 3</option> 
 
</select>

Answer 2

Вы можете использовать псевдокласмент :checked для зеленого цвета выбранной опции. Это пример кода, который должен работать

.empty option, .empty option:disabled:checked { 
 
    color: grey; 
 
} 
 
.empty option:checked{ 
 
    color:green; 
 
}

<select class="empty"> 
 
    <option value="" selected disabled>Please select</option> 
 
    <option value="1">Item 1</option> 
 
    <option value="2">Item 2</option> 
 
    <option value="3">Item 3</option> 
 
</select>