Jak zmienić kolor tekstu pierwszej opcji wybierz

Question

Mam element wyboru, który ma kilka elementów. Chcę zmienić kolor pierwszego elementu. Wygląda jednak na to, że kolor pojawia się tylko po kliknięciu menu wyboru. To, czego chcę, zmieniło kolor (np. Kolor szary) po załadowaniu strony, aby użytkownicy mogli zobaczyć zmianę koloru pierwszej opcji.

Patrz przykład tutaj ... http://jsbin.com/acucan/4/

Dzięki za odpowiedź! Po raz pierwszy tutaj publikuję pytanie. Przepraszam za mój angielski. Mam nadzieję, że postawię to pytanie jasno.

Dzięki

Answer 1

Co o tym:

select{ 
    width: 150px; 
    height: 30px; 
    padding: 5px; 
    color: green; 
} 
select option { color: black; } 
select option:first-child{ 
    color: green; 
} 

http://jsbin.com/acucan/9

Answer 2

Można to zrobić za pomocą CSS: JSFiddle

HTML:

<select> 
    <option>Text 1</option> 
    <option>Text 2</option> 
    <option>Text 3</option> 
</select> 

CSS:

select option:first-child { color:red; } 

A jeśli koniecznie musisz użyć JavaScript (nie adviced do tego): JSFiddle

JavaScript:

$(function() { 
    $("select option:first-child").addClass("highlight"); 
}); 

CSS:

.highlight { color:red; } 

Answer 3

Naprawdę chciał tego (symbole zastępcze powinny wyglądać tak samo dla pól tekstowych jak pole wyboru es!) i prosty CSS nie działa w Chrome. Oto co zrobiłem:

Najpierw upewnij się, że wybrany znacznik ma klasę .has-prompt.

Następnie zainicjuj tę klasę gdzieś w document.ready.

# Adds a class to select boxes that have prompt currently selected. 
# Allows for placeholder-like styling. 
# Looks for has-prompt class on select tag. 
Mess.Views.SelectPromptStyler = Backbone.View.extend 
    el: 'body' 

    initialize: -> 
    @$('select.has-prompt').trigger('change') 

    events: 
    'change select.has-prompt': 'changed' 

    changed: (e) -> 
    select = @$(e.currentTarget) 
    if select.find('option').first().is(':selected') 
     select.addClass('prompt-selected') 
    else 
     select.removeClass('prompt-selected') 

Następnie w CSS:

select.prompt-selected { 
    color: $placeholder-color; 
} 

Answer 4

Oto sposób tak, że po wybraniu opcji, to staje się czarny. Po zmianie z powrotem na symbol zastępczy, zmienia się z powrotem w kolor zastępczy (w tym przypadku czerwony).

http://jsfiddle.net/wFP44/166/

Wymaga opcje mają wartości.

$('select').on('change', function() { 
 
    if ($(this).val()) { 
 
return $(this).css('color', 'black'); 
 
    } else { 
 
return $(this).css('color', 'red'); 
 
    } 
 
});

select{ 
 
    color: red; 
 
} 
 
select option { color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
<option value="">Pick one...</option> 
 
<option value="test1">Test 1</option> 
 
<option value="test2">Test 2</option> 
 
<option value="test3">Test 3</option> 
 
</select>

Answer 5

Jeśli pierwszy element ma być używany jako zastępczy (wartość pusta) a następnie wybierz to required można użyć pseudo-klasę :invalid aby ją uaktywnić.

select { 
 
    -webkit-appearance: menulist-button; 
 
    color: black; 
 
} 
 

 
select:invalid { 
 
    color: green; 
 
}

<select required> 
 
    <option value="">Item1</option> 
 
    <option value="Item2">Item2</option> 
 
    <option value="Item3">Item3</option> 
 
</select>