我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
我目前无法使用这些选项，因为对我来说（1）不需要，（2）需要返回默认可选选项。因此，如果您使用jQuery，这里有一个很严厉的选项：
var$selects=$（'select'）；$selects.change（函数（）{var option=$（'选项：默认'，this）；if（option&&option.is（'：selected'））{$（this）.css（'color'，'#999'）；}其他{$（this）.css（'color'，'#555'）；}});$selects.each（函数）{$（this）.change（）；});期权{颜色：#555；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select name=“in op”><option default selected>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>
其他回答
我看到了正确答案的迹象，但要将所有答案结合起来，这将是我的解决方案：
选择{颜色：灰色；}期权{颜色：黑色；}选项[默认值]{显示：无；}<选择><option value=“”默认选择>选择您的选项</option><option value=“hurr”>Durr</option></选择>
您需要表单验证，现代浏览器从头开始就提供了这一功能。
因此，您不必担心用户无法选择字段。因为当他这样做时，浏览器验证会告诉他，这是一个错误的选择。
浏览器内置的验证函数checkValidatity（）。
Bootstrap也有一个很好的例子。
HTML
<form class="needs-validation">
<select required>
<option value="">Please select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<form>
Java脚本
form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
//form validation succeeded
} else {
//form validation failed
}
使用类名包，这里有一个与我的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);
}
以下解决方案也适用于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中的另一种可能性：
$('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公司
