我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
纯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与页面加载结束前可用的每个选择框一起工作。
其他回答
类似于：
HTML格式：
<select id="choice">
<option value="0" selected="selected">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
CSS:
#choice option { color: black; }
.empty { color: gray; }
JavaScript：
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
工作示例：http://jsfiddle.net/Zmf6t/
以下解决方案也适用于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></选择>
使用类名包，这里有一个与我的React功能组件一起工作的解决方案。我的组件使用钩子，但这可能对解决方案并不重要。这种方法是基于类的解决方案的一种功能性模仿。。。https://www.derpturkey.com/select-placeholder-with-react/
组件JS。。。
function NavBar(props, prevProps) {
const ClassNames = require("classnames"); // package needs require rather than import
const [where, changeWhere] = useState(""); // my component's value
// classnames will add placeholderSelect class if chosen option's value is empty
let whereClass = ClassNames("myOtherStyleRules", {
placeholderSelect: !where,
});
...
return (
...
<div id="where">
<select
className={whereClass}
value={where}
...
>
<option value="" hidden> where? </option> // value must be empty, hidden from choice
<option value="24">Anchorage</option>
<option value="27">Birmingham</option>
<option value="28">Detroit</option>
<option value="25">Los Angeles</option>
<option value="26">Oahu</option>
<option value="29">Seattle</option>
</select>
...
组件CSS。。。
.placeholderSelect {
color: rgb(167, 167, 167);
}
2023年的解决方案：具有选择器：
选择：已（选项：已禁用：已选中[隐藏]）{颜色：灰色；}选择选项{颜色：黑色；}<选择><option selected disabled hidden>选择</option><option>一个</option><option>两个</option><option>三个</option></选择>
在这里，我修改了大卫的答案（接受的答案）。在他的回答中，他将禁用和选定属性放在选项标签上，但当我们也放置隐藏标签时，它看起来会更好。
通过在选项标签上添加额外的隐藏属性，它将防止在选择“Durr”选项后重新选择“Select your option”选项。
<选择><option value=“”disabled selected hidden>选择您的选项</option><option value=“hurr”>Durr</option></选择>
