我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<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");
}
});
其他回答
不需要任何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函数纠正了刷新错误。
您需要表单验证，现代浏览器从头开始就提供了这一功能。
因此，您不必担心用户无法选择字段。因为当他这样做时，浏览器验证会告诉他，这是一个错误的选择。
浏览器内置的验证函数checkValidatity（）。
Bootstrap也有一个很好的例子。
HTML
<form class="needs-validation">
<select required>
<option value="">Please select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<form>
Java脚本
form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
//form validation succeeded
} else {
//form validation failed
}
我遇到了同样的问题，在搜索时我遇到了这个问题，在我找到了一个好的解决方案后，我想和你们分享一下，以防有人从中受益。
这里是：
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类，以防再次选择第一个选项：）
我不满足于仅使用HTML/CSS的解决方案，所以我决定使用JavaScript创建一个自定义选择。
这是我在过去30分钟里写的，因此可以进一步改进。
您所要做的就是创建一个简单的列表，其中包含很少的数据属性。代码自动将列表转换为可选择的下拉列表。它还添加了一个隐藏的输入以保存所选值，因此可以在表单中使用。
输入：
<ul class="select" data-placeholder="Role" data-name="role">
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li data-value="user">User</li>
</ul>
输出：
<div class="ul-select-container">
<input type="hidden" name="role" class="hidden">
<div class="selected placeholder">
<span class="text">Role</span>
<span class="icon">▼</span>
</div>
<ul class="select" data-placeholder="Role" data-name="role">
<li class="placeholder">Role</li>
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li data-value="user">User</li>
</ul>
</div>
假定为占位符的项的文本将灰显。占位符是可选的，以防用户想要恢复其选择。同样使用CSS，select的所有缺点都可以被克服（例如，选项的样式无法设置）。
//帮助程序功能可更快/更轻松地创建元素// https://github.com/akinuri/js-lib/blob/master/element.jsvar elem=函数（tagName、属性、子项、isHTML）{让父母；if（tagName类型==“string”）{parent=document.createElement（tagName）；}else if（HTMLElement的tagName实例）{parent=tagName；}if（属性）{for（属性中的let属性）{parent.setAttribute（属性，属性[attribute]）；}}var isHTML=isHTML||null；if（children || children==0）{elem.append（父级、子级、isHTML）；}返回父项；};elem.append=函数（父级、子级、isHTML）{if（HTMLTextAreaElement的父实例|| HTMLInputElement的父示例）{if（文本的子实例||typeof children==“string”||typeofchildren===“number”）{parent.value=子项；}else if（数组的子实例）{children.forEach（函数（child）{elem.append（父级，子级）；});}else if（typeof children==“function”）{elem.append（父级，子级（））；}}其他{if（HTMLElement的子实例||文本的子实例）{parent.appendChild（children）；}否则如果（typeof children==“string”| | typeof children==“number”）{if（isHTML）{parent.innerHTML+=子级；}其他{parent.appendChild（document.createTextNode（children））；}}else if（数组的子实例）{children.forEach（函数（child）{elem.append（父级，子级）；});}else if（typeof children==“function”）{elem.append（父级，子级（））；}}};//初始化页面上的所有选择$（“ul.select”）.each（函数）{var parent=this.parentElement；var refElem=this.nextElementSibling；var container=elem（“div”，｛“class”：“ul select container”｝）；var hidden=elem（“input”，｛“type”：“hidden”，“name”：this.dataset.name，“class”：“隐藏”｝）；var selected=elem（“div”，｛“class”：“selected placeholder”｝[elem（“span”，｛“class”：“text”｝，this.dataset.placeholder），elem（“span”，｛“class”：“icon”｝，“▼；”，true），]);var placeholder=elem（“li”，｛“class”：“placeholder”｝，this.dataset.placeholder）；this.insertBefore（占位符，this.children[0]）；container.appendChild（隐藏）；container.appendChild（选中）；container.appendChild（this）；parent.insertBefore（容器，refElem）；});//使用所选选项更新必要的元素$（“.ul选择容器ul li”）.on（“单击”，函数（）{var text=this.innerText；var value=this.dataset.value | |“”；var selected=this.parentElement.previousElementSibling；var hidden=selected.previousElementSibling；hidden.value=selected.dataset.value=值；selected.children[0].innerText=文本；if（this.classList.incontains（“占位符”））{selected.classList.add（“占位符”）；}其他{selected.classList.remove（“占位符”）；}selected.parentElement.classList.remove（“可见”）；});//打开选择下拉列表$（“.ul select container.selected”）.on（“单击”，函数（）{if（this.parentElement.classList.incontains（“可见”））{this.parentElement.classList.remove（“可见”）；}其他{this.parentElement.classList.add（“可见”）；}});//焦点丢失时关闭选择$（文档）.on（“点击”，功能（e）{var container=$（e.target）最近（“.ul select container”）；如果（container.length==0）{$（“.ul select container.visible”）.removeClass（“可见”）；}});.ul选择容器{宽度：200px；显示：表格；位置：相对；边距：1em 0；}.ul-select-container.visible ul{显示：块；填充：0；列表样式：无；边距：0；}.ul选择容器ul{背景色：白色；边框：1px实心hsla（0，0%，60%）；边框顶部：无；-webkit用户选择：无；显示：无；位置：绝对；宽度：100%；z指数：999；}.ul选择容器ul li{衬垫：2px 5px；}.ul选择容器ul li.placeholder{不透明度：0.5；}.ul选择容器ul li：悬停{背景色：闪避蓝；颜色：白色；}.ul选择容器ul li占位符：悬停{背景色：rgba（0、0、0和.1）；颜色：初始；}.ul选择容器。已选择{背景色：白色；填充：3px 10px 4px；衬垫：2px 5px；边框：1px实心hsla（0，0%，60%）；-webkit用户选择：无；}.ul选择容器。已选择{显示：柔性；调整内容：间距；}.ul选择容器.selected.placeholder.text{颜色：rgba（0、0、0和.5）；}.ul选择容器已选择图标{字体大小：.7em；显示：柔性；对齐项目：居中；不透明度：0.8；}.ul选择容器：悬停.selected{边框：1px实心hsla（0，0%，30%）；}.ul选择容器：悬停选定图标{不透明度：1；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul class=“select”数据占位符=“Role”数据名称=“Role”><li data value=“admin”>管理员</li><li data value=“mod”>主持人</li><li data value=“user”>用户</li></ul><ul class=“select”数据占位符=“Sex”数据名称=“Sex”><li data value=“male”>男性</li><li数据值=“female”>女性</li></ul>
更新：我改进了这一点（使用向上/向下/输入键进行选择），稍微整理了一下输出，并将其转换为对象。电流输出：
<div class="li-select-container">
<input type="text" readonly="" placeholder="Role" title="Role">
<span class="arrow">▼</span>
<ul class="select">
<li class="placeholder">Role</li>
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li data-value="user">User</li>
</ul>
</div>
初始化：
new Liselect(document.getElementsByTagName("ul")[0]);
进一步检查：JSFiddle，GitHub（已重命名）。
更新：我已经重写了一遍。我们可以只使用select，而不使用列表。这样，即使没有JavaScript（如果禁用），它也可以工作。
输入：
<select name="role" data-placeholder="Role" required title="Role">
<option value="admin">Administrator</option>
<option value="mod">Moderator</option>
<option>User</option>
</select>
new Advancelect(document.getElementsByTagName("select")[0]);
输出：
<div class="advanced-select">
<input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
<span class="arrow">▼</span>
<ul>
<li class="placeholder">Role</li>
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li>User</li>
</ul>
</div>
JSFiddle，GitHub。
看到这个答案：
<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>
