Bootstrap - wie Farbe wählen "Platzhalter" Option Text

Question

Bootstrap 3.3.7

ich zu ändern habe ein <select> Element und wollte das placeholder Attribut verwenden. Ich read this isn't possible und es sollte nur als disabled Option wie folgt geschehen:

<select id="foo"> 
    <option value="" disabled selected>Select your thing</option> 
    <option value="abc">abc</option> 
    <option value="def">def</option> 
</select> 

Das Problem ist, Bootstrap ergibt dies eine dunkelgraue Farbe (#555), weil es es wie Text in andere (nicht wählen) Text Behandlung Eingaben.

Die Platzhalterfarbe der Schriftart in Bootstrap ist ein helleres Grau (#999). Ich möchte, dass es zusammenpasst.

Aber ich kann keinen Weg finden, diese Option zu zielen. Ich habe folgendes versucht:

#foo option:disabled { color: #999; } 

Und geben Sie der ersten Option eine Klasse, z.

<option value="" class="placeholder-dummy" disabled selected>Select your thing</option> 

.placeholder-dummy { color: #999; } 

Die einzige Art, wie ich in irgendeiner Weise die ID wie folgt aus war es nur zielen könnte:

#foo { color: #999; } 

Aber ... das gibt die gleiche hellgrau Platzhalter Farbe auch nach der Benutzer die Änderungen Möglichkeit.

ich den „Platzhalter“ will („Wählen Sie Ihre Sache“) hellgrau (#999), aber wenn der Benutzer es zu jeder anderen Option ändert, für diejenigen, die dunkleren Grau zu nehmen, wie pro den anderen Eingänge (#555)

Ist das möglich?

Bearbeiten würde eine reine CSS-Lösung bevorzugen, aber da dies unmöglich aussieht, wäre eine JavaScript-Lösung in Ordnung.

Wirklich unsicher, warum die Leute dies abgelehnt haben, da keine der gegebenen Antworten funktioniert! Vielleicht ist es nicht so einfach.

Answer 1

Sie können dies mit [disabled] und :checked Selektoren tun.

Dieser Selektor findet alle options mit dem Attribut disabled:

option[disabled] { 
    color: #555; 
} 

Und dieser Selektor findet alle options mit dem Attribut disabled, die derzeit ausgewählt sind:

option[disabled]:checked { 
    color: #999; 
} 

Answer 2

Beispiel:

Put-Stil in Ihr CSS für wählen Tag

<style> 
    select:invalid { color: gray; } 
</style> 

dann Ihre Platzhalter-Option-Tag ändern Sie es so sein sollte:

<select id="foo"> 
    <option value="" disabled selected hidden>Select your thing</option> 
    <option value="abc">abc</option> 
    <option value="def">def</option> 
</select> 

statt:

<select id="foo"> 
    <option value="" disabled selected>Select your thing</option> 
    <option value="abc">abc</option> 
    <option value="def">def</option> 
</select>