Festlegen der Schriftfarbe für den ausgewählten Optionsplatzhalter

Question

Suchen nach einer Möglichkeit, die Schriftfarbe eines Dropdown-Listenplatzhalters festzulegen. Die folgenden funktionierten, wenn die Auswahl-ID erforderlich war:

select:required:invalid { 
    color: #9e9e9e; 
} 

Allerdings möchte ich diese Dropdown-Listen nicht für die Eingabe erforderlich sein. Sobald ich das erforderliche Tag entfernt habe, wird die Platzhalterschrift wieder schwarz.

Das folgende ist mein Dropdown-Liste:

<select id="searchresults4" name="primarysport"> 
    <option value="">Choose Primary Sport...</option> 
    <option>Football</option> 
    <option>Basketball</option> 
    <option>Baseball</option> 
    <option>Softball</option> 
    <option>Soccer</option> 
    <option>Golf</option> 
</select> 

Danke für Ihre Hilfe

Answer 1

Ein bisschen hacky, aber funktioniert; das heißt, wenn ich die Frage richtig verstehe.

select { 
 
    color: #9e9e9e; 
 
} 
 
option:not(:first-of-type) { 
 
    color: black; 
 
}

<select id="searchresults4" name="primarysport"> 
 
    <option value="">Choose Primary Sport...</option> 
 
    <option>Football</option> 
 
    <option>Basketball</option> 
 
    <option>Baseball</option> 
 
    <option>Softball</option> 
 
    <option>Soccer</option> 
 
    <option>Golf</option> 
 
</select>

Answer 2

select { 
 
    color: #9e9e9e; 
 
}

<select id="searchresults4" name="primarysport"> 
 
    <option value="">Choose Primary Sport...</option> 
 
    <option>Football</option> 
 
    <option>Basketball</option> 
 
    <option>Baseball</option> 
 
    <option>Softball</option> 
 
    <option>Soccer</option> 
 
    <option>Golf</option> 
 
</select>

Answer 3

Blick auf diese Art und Weise ...

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

<select id="searchresults4" name="primarysport" required> 
 
    <option value="" disabled selected>Choose Primary Sport...</option> 
 
    <option>Football</option> 
 
    <option>Basketball</option> 
 
    <option>Baseball</option> 
 
    <option>Softball</option> 
 
    <option>Soccer</option> 
 
    <option>Golf</option> 
 
</select>

Answer 4

Ändern Sie den aktuellen CSS, die Sie in dieses:

select, select[size="0"], select[size="1"] { 
border-radius: 0px; 
border-color: rgb(169, 169, 169); 

}

dies das gleiche Ergebnis machen mit:

select:required:invalid { 
color: #9e9e9e; 

}

Ohne erforderlich werden.