我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
看到这个答案：
<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>
其他回答
纯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与页面加载结束前可用的每个选择框一起工作。
我看到了正确答案的迹象，但要将所有答案结合起来，这将是我的解决方案：
选择{颜色：灰色；}期权{颜色：黑色；}选项[默认值]{显示：无；}<选择><option value=“”默认选择>选择您的选项</option><option value=“hurr”>Durr</option></选择>
好的，在我的案例中，有一个很有用，它的特点（与公认的答案相反）：
如果是占位符，则为灰色不需要选择能够变回灰色（值=“”）没有外部库（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></选择>
以下解决方案也适用于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></选择>
下面是一个工作示例，如何使用纯JavaScript实现这一点，该JavaScript处理第一次单击后的选项颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#myselect {
color: gray;
}
</style>
</head>
<body>
<select id="myselect">
<option disabled selected>Choose Item
</option>
<option>Item 1
</option>
<option>Item 2
</option>
<option>Item 3
</option>
</select>
<script>
// Add event listener to change color in the first click
document.getElementById("myselect").addEventListener("click", setColor)
function setColor()
{
var combo = document.getElementById("myselect");
combo.style.color = 'red';
// Remove Event Listener after the color is changed at the first click
combo.removeEventListener("click", setColor);
}
</script>
</body>
</html>
