我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
您可以将第一个选项的颜色设置为灰色，将其显示设置为无，将选择的颜色设置成灰色，并向其添加一个将其颜色设置为黑色的输入事件侦听器。
选择>选项：不（：第一个类型）{颜色：黑色；}<select style='color:gray'on输入='style.color=“black”'><option style='display:none'>选择一个选项</选项><选项>1.</选项><选项>2.</选项><选项>3.</选项></选择>
使用customElement API：
class placeholderSelect扩展了HTMLElement{已连接Callback（）{this.innerHTML=`<select style='color:gray'on输入='style.color=“black”'><option style='display:none'>${this.getAttribute（'data-placeholder'）}</选项>$｛this.innerHTML｝</select>`；Array.from（this.children[0].childress）.forEach（函数（el，i）{el.style.color=“黑色”；});}}customElements.define（'占位符选择'，占位符选择）；<placeholder select data placeholder=“选择选项”><选项>1.</选项><选项>2.</选项><选项>3.</选项></占位符选择>
其他回答
不需要任何JavaScript或CSS，只需要三个属性：
<select>
<option selected disabled hidden>Default Value</option>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
它根本没有显示选项；它只是将选项的值设置为默认值。
但是，如果您只是不喜欢与其他占位符颜色相同的占位符，您可以这样内联修复它：
<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>
<body onload="document.getElementById('mySelect').selectedIndex = 0">
<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'" style="color: gray; width: 150px;">
<option value="" hidden>Select your beverage</option> <!-- placeholder -->
<option value="water" style="color:black" >Water</option>
<option value="milk" style="color:black" >Milk</option>
<option value="soda" style="color:black" >Soda</option>
</select>
</body>
</html>
显然，您可以将函数和至少select的CSS分离为单独的文件。
注意：onload函数纠正了刷新错误。
我遇到了同样的问题，在搜索时我遇到了这个问题，在我找到了一个好的解决方案后，我想和你们分享一下，以防有人从中受益。
这里是：
HTML格式：
<select class="place_holder dropdown">
<option selected="selected" style=" display: none;">Sort by</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>
CSS:
.place_holder {
color: gray;
}
option {
color: #000000;
}
JavaScript：
jQuery(".dropdown").change(function () {
jQuery(this).removeClass("place_holder");
});
在客户进行第一次选择后，不需要灰色，因此JavaScript代码删除了place_holder类。
多亏了@user1096901，作为Internet Explorer浏览器的解决方案，您可以再次添加place_holder类，以防再次选择第一个选项：）
看到这个答案：
<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>
基于Albireo的响应，该版本不使用jQuery，CSS的特异性更好。
const triggerEvent=（el，eventName）=>{let event=document.createEvent（'HTMLEvents'）event.initEvent（eventName，true，false）el.dispatchEvent（事件）}let select=document.querySelector（'.placeholder select'）select.addEventListener（'change'，（e）=>{e.target.classList[e.target.value==0？'add'：'remove']（'empty'）})triggerEvent（选择，“更改”）占位符选择选项{颜色：#000000；}占位符选择选项：第一个子项{颜色：#444444；字体样式：斜体；字号：粗体；}.占位符-选择为空{颜色：#7F7F7F；}<select class=“placeholder select”><option value=“0”selected=“selected”>选择</选项><option value=“1”>有些东西</option><option value=“2”>其他内容</option><option value=“3”>另一个选项</option></选择>
非CSS-无JavaScript/jQuery答案：
<label>选项名称<选择><option value=“”disabled selected>选择您的选项</option><option value=“hurr”>Durr</option></选择></label>
更新（2021 12月）：
这适用于最新的Firefox、Chrome和Safari。正如评论中指出的那样，它过去不适用于许多浏览器。
