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

Я пытаюсь изменить цвет первой опции на серый цвет, это только текст (выберите один вариант), но здесь он не работает здесь:

.grey_color {
  color: #ccc;
  font-size: 14px;
}

<select id="select">
   <option selected="selected"><span class="grey_color">select one option</span></option>
   <option>one</option>  
   <option>two</option>  
   <option>three</option>  
   <option>four</option>  
   <option >five</option>  
</select>

Ответы

Ответ 1

Суреш, вам не нужно ничего использовать в своих кодах. Что вам нужно, это что-то вроде этого:

.others {
    color:black
}

<select id="select">
    <option style="color:gray" value="null">select one option</option>
    <option value="1" class="others">one</option>
    <option value="2" class="others">two</option>
</select>

Ответ 2

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

Все, что вам нужно сделать, это установить первый вариант для отключения и выбора. Вот так:

<select id="select">
    <option disabled="disabled" selected="selected">select one option</option>
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
    <option>five</option>
</select>

Ответ 3

Вам просто нужно добавить disabled в качестве атрибута option

<option disabled>select one option</option>

Ответ 4

Вот моя демонстрация с jQuery

<!doctype html>
<html>
<head>
<style>
    select{
        color:#aaa;
    }
    option:not(first-child) {
        color: #000;
    }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("select").change(function(){
            if ($(this).val()=="") $(this).css({color: "#aaa"});
            else $(this).css({color: "#000"});
        });
    }); 
</script>
<meta charset="utf-8">
</head>
<body>
<select>
    <option disable hidden value="">CHOOSE</option>
    <option>#1</option>
    <option>#2</option>
    <option>#3</option>
    <option>#4</option>
</select>
</body>
</html>

https://jsfiddle.net/monster75/cnt73375/1/

Ответ 5

Попробуйте это без тега span:

<option selected="selected" class="grey_color">select one option</option>

Для большей гибкости вы можете использовать любой виджет JS.

Ответ 6

<select id="select">
    <optgroup label="select one option">
        <option>one</option>  
        <option>two</option>  
        <option>three</option>  
        <option>four</option>  
        <option>five</option>
    </optgroup>
</select>

Ответ 7

У вас не может быть HTML-код внутри параметров, он может содержать только текст, но вместо этого вы можете применить класс к нему:

<option selected="selected" class="grey_color">select one option</option>

Демо: http://jsfiddle.net/Guffa/hUpAB/9/

Примечание:

Поддержка вариантов стилей зависит от браузеров. В современных браузерах вы обычно можете рассчитывать на поддержку окраски, но не на размер шрифта. Например, браузер в телефоне обычно не отображает параметры в выпадающем меню, поэтому стиль не будет иметь никакого отношения.
В HTML-коде в jsfiddle не должно быть тегов html и head.
Вы должны назвать свои классы тем, что представляют, а не как они выглядят.