我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
选择：焦点选项。文件夹{显示：无；}<选择><option selected=“selected”class=“holder”>请选择</option><option value=“1”>选项#1</option><option value=“2”>选项#2</option></选择>
其他回答
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公司
请尝试以下更改：
$("select").css("color", "#757575");
$(document).on("change", "select", function(){
if ($(this).val() != "") {
$(this).css("color", "");
}
else {
$(this).css("color", "#757575");
}
});
我喜欢这个被接受的解决方案，而且它在没有JavaScript的情况下工作得很好。
我只想补充一下，我是如何对一个受控选择的React组件采用这个答案的，因为我花了几次时间才弄清楚。合并react select并使用它将非常简单，但除非您需要这个存储库提供的惊人功能，而我不需要这个功能，否则就不需要在我的捆绑包中添加更多的KB。注意，react select通过各种输入和html元素的复杂系统处理select中的占位符。
在React中，对于受控组件，不能将所选属性添加到选项中。React通过select本身的value属性以及一个更改处理程序来处理select的状态，其中值应该与选项本身中的一个value属性匹配。
例如
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
{options}
</select>
既然将所选属性添加到其中一个选项中是不正确的，而且实际上会引发错误，那么该怎么办？
只要你想一想，答案很简单。既然我们希望我们的第一个选项被选中、禁用和隐藏，我们需要做三件事：
将隐藏和禁用的属性添加到第一个定义的选项。将第一个选项的值设置为空字符串。将select的值初始化为空字符串。
state = { selectValue = "" } // State or props or their equivalent
// In the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
<option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
{renderOptions()}
</select>
现在，您可以按照上面的指示（或通过className，如果您愿意）设置选择的样式。
select:invalid { color: gray; }
基于MattW的回答，您可以在做出有效选择后，通过仅在占位符保持选中时有条件地隐藏它，使选择占位符选项在下拉菜单中可见（因此选择无效）。
select：必需：无效{颜色：灰色；}select：无效>选项[value=“”][禁用]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>
纯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与页面加载结束前可用的每个选择框一起工作。
