我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
为选择元素输入[type=“text”]样式占位符
以下解决方案模拟占位符，因为它与input[type=“text”]元素相关：
$（'.example'）.change（函数（）{$（this）.css（'color'，$（this）.val（）=='？'#999' : '#555');});.示例{颜色：#999；}.example>选项{颜色：#555；}.example>选项[value=“”]{颜色：#999；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“example”><option value=“”>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>
其他回答
好的，在我的案例中，有一个很有用，它的特点（与公认的答案相反）：
如果是占位符，则为灰色不需要选择能够变回灰色（值=“”）没有外部库（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></选择>
对于必填字段，现代浏览器中有一个纯CSS解决方案：
select：必需：无效{颜色：灰色；}选项[value=“”][disabled]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>
基于MattW的回答，您可以在做出有效选择后，通过仅在占位符保持选中时有条件地隐藏它，使选择占位符选项在下拉菜单中可见（因此选择无效）。
select：必需：无效{颜色：灰色；}select：无效>选项[value=“”][禁用]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>
这个HTML+CSS解决方案对我很有用：
表单选择：无效{颜色：灰色；}表单选择选项：第一个子项{颜色：灰色；}表单选择：无效选项：不（：第一个子项）{颜色：黑色；}<表单><选择所需><option value=“”>选择行星</选项><option value=“earth”>地球</option>潘多拉</option></选择></form>
您可以将第一个选项的颜色设置为灰色，将其显示设置为无，将选择的颜色设置成灰色，并向其添加一个将其颜色设置为黑色的输入事件侦听器。
选择>选项：不（：第一个类型）{颜色：黑色；}<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.</选项></占位符选择>
