Стиль первый выберите вариант в Bootstrap 3

Question

Я пытаюсь изменить цвет шрифта первого выбора варианта, который имеет form-control класс Bootstrap, как показано ниже:

<select class="form-control"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

Я попытался укладки его с помощью атрибута first-child следующим образом, но окрашивает все в красный цвет:

select.form-control { color: red; } 
select.form-control option { color: black; } 
select.form-control option:first-child { color: red; } 

Я даже попытался укладки его рядный, но он все еще не может переопределить CSS Bootstrap в:

<select class="form-control"> 
    <option style="color: red;" color="red">1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

Интересно, что CSS правильно стили первого элемента, когда это multiple стиль, но это не то, что мне нужно:

<select multiple class="form-control"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

Вот codepen воспроизводя это: http://codepen.io/anon/pen/MKjYjq

UPDATE 1:

По первому элементу я имею в виду первый вариант внутри select (т.е. <option>1</option>). Я бы хотел, чтобы он был красным, а остальное черным.

В отличие от некоторых комментариев сообщенных с оригинальным Codepen, даже встроенный подход не работает для меня в Chrome 47, Safari 9 и Firefox 42 на Mac:

Нужный вариант где номер 2 на изображении выше (наряду с другими вариантами ниже) черный, но опция 1 - красный.

Answer 1

решение на базе Java-(http://codepen.io/anon/pen/ZQpGpY)

разметки:

<select class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 

Css:

select.form-control.first-option-selected { 
    color: red; 
} 

select.form-control > option { 
    color: black; 
} 

JavaScript (JQuery используется для удобства):

$(function() { 
    var selectElement = $('select.form-control'); 

    function ifFirstOptionSelectedMakeItRed() { 
    if (selectElement[0].selectedIndex === 0) { 
     selectElement.addClass('first-option-selected'); 
    } else { 
     selectElement.removeClass('first-option-selected'); 
    } 
    } 

    ifFirstOptionSelectedMakeItRed(); 

    selectElement.on('change', function() { 
    ifFirstOptionSelectedMakeItRed(); 
    }) 
}); 

Мои рассуждения для этого решения заключается в следующем:

• Я не думаю, что вы можете проверить, какой вариант будет выбран с помощью CSS. Моя первая идея заключалась в использовании селектора атрибутов. Но я не мог найти полезных атрибутов в документации для этого элемента. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
• Ни для опции элемента https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
• Так будучи хромым css'er я обратился к JS - и все довольно просто там https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement у вас есть все виды свойств, чтобы проверить против. Я закончил тем, что использовал selectedIndex. И есть событие change, когда пользователь выбирает новую опцию. https://developer.mozilla.org/en-US/docs/Web/Events/change

Answer 2

Это прямо с вашего собственного кода: https://jsfiddle.net/oa9wj80x/2/

Если это не то, что вы спрашиваете, то ИДК лол

<select class="form-control"> 
    <option style="color: red;">1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 

редактировать 1

или вы ищете это эффект? https://jsfiddle.net/oa9wj80x/3/

edit2

Я думаю, что это то, что вы пытаетесь сделать? https://jsfiddle.net/oa9wj80x/5/

<select id="slct" onchange="change()" class="form-control"> 
    <option id="opt1" value="1">1</option> 
    <option id="opt2" value="2">2</option> 
    <option id="opt3" value="3">3</option> 
    <option id="opt4" value="4">4</option> 
    <option id="opt5" value="5">5</option> 
</select> 
<script> 
function change(){ 
    var x = document.getElementById("slct").value; 

    if(x > 1){ 
    document.getElementById("slct").style.color = "black"; 
    } 
    else{ 
    document.getElementById("slct").style.color = "red"; 
    } 
} 
</script> 

Answer 3

<p>Even inline doesn't work:</p> 
<select class="form-control"> 
    <option style="color:red;">1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 

Это работает без каких-либо изменений CSS.

Answer 4

После просмотра вокруг я нашел CSS только решение, которое работает в современных браузерах:

select:required:invalid { 
    color: red; 
} 
option[value=""][disabled] { 
    display: none; 
} 
option { 
    color: black; 
} 

HTML

<select required class="form-control"> 
    <option value="" disabled selected>1</option> 
    <option value="1">2</option> 
    <option value="2">3</option> 
</select> 

Источник: https://stackoverflow.com/a/29806043