我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
您需要表单验证，现代浏览器从头开始就提供了这一功能。
因此，您不必担心用户无法选择字段。因为当他这样做时，浏览器验证会告诉他，这是一个错误的选择。
浏览器内置的验证函数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
}
其他回答
请尝试以下更改：
$("select").css("color", "#757575");
$(document).on("change", "select", function(){
if ($(this).val() != "") {
$(this).css("color", "");
}
else {
$(this).css("color", "#757575");
}
});
对于必填字段，现代浏览器中有一个纯CSS解决方案：
select：必需：无效{颜色：灰色；}选项[value=“”][disabled]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>
以下解决方案也适用于Firefox，无需任何JavaScript：
选项[默认值]{显示：无；}<选择><option value=“”默认选择>选择您的年龄</option><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option><option value=“4”>4</option></选择>
您需要表单验证，现代浏览器从头开始就提供了这一功能。
因此，您不必担心用户无法选择字段。因为当他这样做时，浏览器验证会告诉他，这是一个错误的选择。
浏览器内置的验证函数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
}
我刚刚偶然发现了这个问题，下面是Firefox和Chrome的工作原理（至少）：
<style>选择：无效｛颜色：灰色；｝</style><表单><选择所需><option value=“”禁用所选隐藏>请选择</选项><option value=“0”>通电时打开（大多数阀门都这样做）</option><option value=“1”>通电时关闭，断电时自动打开</option></选择></form>
禁用选项可停止使用鼠标和键盘选择＜option＞，而仅使用“display：none”允许用户仍然通过键盘箭头进行选择。“display:none”样式只是让列表框看起来“不错”。
注意：在“占位符”选项上使用空值属性允许验证（必需属性）绕过“占位符”，因此如果选项未更改，但是必需的，则浏览器应提示用户从列表中选择一个选项。
更新（2015年7月）：
确认此方法在以下浏览器中有效：
谷歌Chrome-v.43.0.2357.132Mozilla Firefox-第39.0版Safari-v.8.0.7（占位符在下拉列表中可见，但不可选择）Microsoft Internet Explorer-v.11（占位符在下拉列表中可见，但不可选择）Project Spartan-v.15.10130（占位符在下拉列表中可见，但不可选择）
更新（2015年10月）：
我删除了style=“display:none”，改为支持广泛的HTML5属性hidden。隐藏元素具有与显示类似的特性：在Safari、Internet Explorer和（Project Spartan需要检查）中都没有，在下拉列表中该选项可见，但不可选择。
更新（2016年1月）：
当需要select元素时，它允许使用：invalid CSS伪类，该类允许您在select元素处于“占位符”状态时设置其样式。：由于占位符选项中的值为空，因此此处无效。
设置值后，将删除：invalid伪类。如果您愿意，也可以选择使用：valid。
大多数浏览器都支持这个伪类。Internet Explorer 10及更高版本。这对于自定义样式的选择元素最有效；在某些情况下，例如（Mac在Chrome/Safari中），您需要更改选择框的默认外观，以便显示某些样式，例如背景色和颜色。您可以在developer.mozilla.org上找到一些关于兼容性的示例和更多信息。
Chrome中的原生元素外观Mac：
在Chrome中使用更改的边框元素Mac：
