設置選擇佔位符的字體顏色

Question

尋找設置下拉列表佔位符字體顏色的方法。當需要選擇ID時，以下工作：

select:required:invalid { 
    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 1

有點哈克，但工程;也就是說，如果我正確地理解了這個問題。

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

看這樣子......

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

更改當前的CSS，你有這個：

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

}

這將使得具有相同的結果：

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

}

，而無需使用需要。