我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
用户不应在选择选项中看到占位符。我建议为占位符选项使用隐藏属性，并且您不需要为该选项选择所选属性。你可以把它放在第一位。
select：不（：有效）{颜色：#999；}<选择所需><option value=“”hidden>选择您的选项</option><option value=“0”>第一个选项</option><option value=“1”>第二个选项</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 |
我只是在下面的选项中添加了一个隐藏属性。这对我来说很好。
<选择><option hidden>性别</option><option>男性</option><option>女性</option></选择>
我遇到了同样的问题，在搜索时我遇到了这个问题，在我找到了一个好的解决方案后，我想和你们分享一下，以防有人从中受益。
这里是：
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类，以防再次选择第一个选项：）
纯JavaScript解决方案，允许用户在未选择值时仅通过禁用选项来重置字段。
我不喜欢仅仅禁用该选项的方式（尽管这确实是一个非常简单的解决方案）。但我需要重置选择框。所以我在下面创建了一个简单的JavaScript解决方案。
在HTML代码中，您只需执行以下操作：
<select name="animal">
<option class="placeholder">Animal</option>
<option value="1">Mouse</option>
<option value="2">Cat</option>
</select>
要实现这一点，只需在HTML正文末尾的脚本块中包含以下代码即可。
(function () {
const selectboxPlaceholderOptions = document.querySelectorAll('select option.placeholder');
function selectBoxChange(event) {
const select = event.srcElement;
const placeholderOption = event.srcElement.querySelector('option.placeholder');
if (!placeholderOption)
return;
if (!select.value || select.value === '') {
placeholderOption.disabled = true;
placeholderOption.textContent = placeholderOption.dataset['placeholderText'];
} else {
placeholderOption.disabled = false;
placeholderOption.textContent = '';
}
}
for (let i = 0; i < selectboxPlaceholderOptions.length; i++) {
const option = selectboxPlaceholderOptions[i];
const select = option.parentElement;
option.value = '';
option.disabled = true;
option.dataset['placeholderText'] = option.textContent;
select.addEventListener("change", selectBoxChange);
}
})();
将类占位符分配给占位符选项后，一切都完成了。JavaScript与页面加载结束前可用的每个选择框一起工作。
请尝试以下更改：
$("select").css("color", "#757575");
$(document).on("change", "select", function(){
if ($(this).val() != "") {
$(this).css("color", "");
}
else {
$(this).css("color", "#757575");
}
});
