我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
这是我的贡献。火腿+咖啡脚本+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），以在占位符打开时保持其灰色，但我并不在乎这一点。
其他回答
这个HTML+CSS解决方案对我很有用：
表单选择：无效{颜色：灰色；}表单选择选项：第一个子项{颜色：灰色；}表单选择：无效选项：不（：第一个子项）{颜色：黑色；}<表单><选择所需><option value=“”>选择行星</选项><option value=“earth”>地球</option>潘多拉</option></选择></form>
非CSS-无JavaScript/jQuery答案：
<label>选项名称<选择><option value=“”disabled selected>选择您的选项</option><option value=“hurr”>Durr</option></选择></label>
更新（2021 12月）：
这适用于最新的Firefox、Chrome和Safari。正如评论中指出的那样，它过去不适用于许多浏览器。
好的，在我的案例中，有一个很有用，它的特点（与公认的答案相反）：
如果是占位符，则为灰色不需要选择能够变回灰色（值=“”）没有外部库（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></选择>
由于本主题中提供的答案之间的样式和功能不同，下表阐明了所提供的HTML、HTML+CSS和HTML+CSS+Javascript解决方案的样式和适用的表单逻辑。
我不得不使用代码格式，因为出于某种原因，标记中不允许使用表。将使用代码段提供一个HTML表来解决表限制。
我将这篇文章标记为社区维基，这样任何人都可以详细介绍新的文章，但请将JQuery、React、Angular、CoffeeScript等添加到另一篇文章中，以保持此表的简单。
| Technologies | Styling |
Post | CSS | Java- | Select: Placeholder | Select: valid option | Option: placeholder | Option: valid option |
ID | | script | Color | Validation | Color | Required | Visibility | Selectable | Color | Cond. formatting | Color | Cond. formatting |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
41167307 | No | No | Black | Invalid | Black | Yes | Visible | No | Grey | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50200912 | No | No | Black | Valid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5859221 | No | No | Black | Valid | Black | No | Visible | No | Grey | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
38120777 | No | No | Black | Valid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
54860799 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
52661024 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | No | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
8442831 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | No | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
29806043 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
61966461 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | select:valid{visible} | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
44406771 | Yes | No | Grey | Invalid | Grey | No | Visible | No | Grey | No | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
40603035 | Yes | No | Black | Valid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
22994211 | Yes | No | Grey | Valid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
21722343 | Yes | No | Grey | Valid | Grey | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
48960650 | Yes | Yes | Grey | Invalid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5805194 | Yes | Yes | Grey | Valid | Black | No | Visible | Yes | Black | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50840409 | Yes | Yes | Grey | Valid | Black | Yes | Visible | Yes | Grey | No | Black | No |
JavaScript中的另一种可能性：
$('body').on('change', 'select', function (ev){
if($(this).find('option:selected').val() == ""){
$(this).css('color', '#999');
$(this).children().css('color', 'black');
}
else {
$(this).css('color', 'black');
$(this).children().css('color', 'black');
}
});
JSFiddle公司
