我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
请尝试以下更改：
$("select").css("color", "#757575");
$(document).on("change", "select", function(){
if ($(this).val() != "") {
$(this).css("color", "");
}
else {
$(this).css("color", "#757575");
}
});
其他回答
非CSS-无JavaScript/jQuery答案：
<label>选项名称<选择><option value=“”disabled selected>选择您的选项</option><option value=“hurr”>Durr</option></选择></label>
更新（2021 12月）：
这适用于最新的Firefox、Chrome和Safari。正如评论中指出的那样，它过去不适用于许多浏览器。
我目前无法使用这些选项，因为对我来说（1）不需要，（2）需要返回默认可选选项。因此，如果您使用jQuery，这里有一个很严厉的选项：
var$selects=$（'select'）；$selects.change（函数（）{var option=$（'选项：默认'，this）；if（option&&option.is（'：selected'））{$（this）.css（'color'，'#999'）；}其他{$（this）.css（'color'，'#555'）；}});$selects.each（函数）{$（this）.change（）；});期权{颜色：#555；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select name=“in op”><option default selected>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>
这对我来说很好：
<select class="form-control">
<option value="" readonly="true" hidden="true" selected>Select your option</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
好的，在我的案例中，有一个很有用，它的特点（与公认的答案相反）：
如果是占位符，则为灰色不需要选择能够变回灰色（值=“”）没有外部库（jquery等）
如果值不是“”，则需要一个小JS函数将其更改为灰色/黑色。注释中解释了JS。。没有注释，只有几行代码。通过将其放在函数中，它将适用于该类的所有复选框。。
函数checkSelectboxes（）{//选中所有复选框，这里我根据类名选择这样做let selectboxes=document.querySelectorAll（'.form select'）；//循环浏览所有复选框（这次只有一个）selectboxes.forEach（sb=>{//将eventlistener添加到每个复选框sb.addEventListener（'change'，函数（e）{//如果此复选框的值不是“”，则添加类，否则：删除它。e.target.value=="" ? e.target.classList.add（'changed'）：e.target.cclassList.remove（'changed'）；})})}//调用函数checkSelectboxes（）；.表单选择{颜色：#ccc；}.form-select已更改{颜色：#000}.form选择选项{颜色：#000；}.form select选项：第一个类型{颜色：#ccc；}<!-- 给第一个选项一个空值，并将其设置为selected--><select type=“text”class=“form select”><option value=“”selected>--我的占位符--</option><option>1 lorem--</option><option>2ipsum--</option><option>3多尔--</option></选择>
在这里，我修改了大卫的答案（接受的答案）。在他的回答中，他将禁用和选定属性放在选项标签上，但当我们也放置隐藏标签时，它看起来会更好。
通过在选项标签上添加额外的隐藏属性，它将防止在选择“Durr”选项后重新选择“Select your option”选项。
<选择><option value=“”disabled selected hidden>选择您的选项</option><option value=“hurr”>Durr</option></选择>
