我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
选择：焦点选项。文件夹{显示：无；}<选择><option selected=“selected”class=“holder”>请选择</option><option value=“1”>选项#1</option><option value=“2”>选项#2</option></选择>
其他回答
如果使用的是Angular，请执行以下操作：
<选择><option[ngValue]=“undefined”disabled selected>选择您的选项</option><option[ngValue]=“hurr”>Durr</option></选择>
我只是在下面的选项中添加了一个隐藏属性。这对我来说很好。
<选择><option hidden>性别</option><option>男性</option><option>女性</option></选择>
基于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></选择>
您可以在不使用JavaScript和仅使用HTML的情况下执行此操作。您需要将默认的select选项设置为disabled=“”和selected=“”，并选择所需的标记=“”。浏览器不允许用户在未选择选项的情况下提交表单。
<form action="" method="POST">
<select name="in-op" required="">
<option disabled="" selected="">Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="submit" value="Submit">
</form>
好的，在我的案例中，有一个很有用，它的特点（与公认的答案相反）：
如果是占位符，则为灰色不需要选择能够变回灰色（值=“”）没有外部库（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></选择>
