我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
我希望SELECT为灰色，直到选中，因此对于这段HTML：
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
我添加了以下CSS定义：
select { color: grey; }
select:valid { color: black; }
它在Chrome/Safari和其他浏览器中都能正常工作，但我还没有检查。
其他回答
这个HTML+CSS解决方案对我很有用：
表单选择：无效{颜色：灰色；}表单选择选项：第一个子项{颜色：灰色；}表单选择：无效选项：不（：第一个子项）{颜色：黑色；}<表单><选择所需><option value=“”>选择行星</选项><option value=“earth”>地球</option>潘多拉</option></选择></form>
我希望SELECT为灰色，直到选中，因此对于这段HTML：
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
我添加了以下CSS定义：
select { color: grey; }
select:valid { color: black; }
它在Chrome/Safari和其他浏览器中都能正常工作，但我还没有检查。
看到这个答案：
<select>
<option style="display: none;" value="" selected>SelectType</option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
<option value="4">Type 4</option>
</select>
类似于：
HTML格式：
<select id="choice">
<option value="0" selected="selected">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
CSS:
#choice option { color: black; }
.empty { color: gray; }
JavaScript：
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
工作示例：http://jsfiddle.net/Zmf6t/
非CSS-无JavaScript/jQuery答案：
<label>选项名称<选择><option value=“”disabled selected>选择您的选项</option><option value=“hurr”>Durr</option></选择></label>
更新（2021 12月）：
这适用于最新的Firefox、Chrome和Safari。正如评论中指出的那样，它过去不适用于许多浏览器。
