我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
以下解决方案也适用于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></选择>
其他回答
我只是在下面的选项中添加了一个隐藏属性。这对我来说很好。
<选择><option hidden>性别</option><option>男性</option><option>女性</option></选择>
这是我的贡献。火腿+咖啡脚本+SCSS
Haml
=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'
咖啡脚本
$('select').on 'change', ->
if $(this).val()
$(this).css('color', 'black')
else
$(this).css('color', 'gray')
$('select').change()
SCSS
select option {
color: black;
}
通过更改服务器代码和仅根据属性的当前值设置类样式，可以仅使用CSS，但这种方式似乎更简单、更干净。
$（'select'）.on（'change'，function（）{if（$（this）.val（））{return$（this）.css（'color'，'black'）；}其他{return$（this）.css（'color'，'gray'）；}});$（'select'）.change（）；选择选项{颜色：黑色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“form control”name=“user[country_id]”id=“user_country_id”><option value=“”>国家</option><option value=“231”>美国</option><option value=“1”>安道尔</option>阿富汗</option><option value=“248”>津巴布韦</option></select>
您可以添加更多的CSS（选择选项：firstchild），以在占位符打开时保持其灰色，但我并不在乎这一点。
看到这个答案：
<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>
我刚刚偶然发现了这个问题，下面是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：
我遇到了同样的问题，在搜索时我遇到了这个问题，在我找到了一个好的解决方案后，我想和你们分享一下，以防有人从中受益。
这里是：
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类，以防再次选择第一个选项：）
