我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<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></选择>
其他回答
2023年的解决方案：具有选择器：
选择：已（选项：已禁用：已选中[隐藏]）{颜色：灰色；}选择选项{颜色：黑色；}<选择><option selected disabled hidden>选择</option><option>一个</option><option>两个</option><option>三个</option></选择>
基于MattW的回答，您可以在做出有效选择后，通过仅在占位符保持选中时有条件地隐藏它，使选择占位符选项在下拉菜单中可见（因此选择无效）。
select：必需：无效{颜色：灰色；}select：无效>选项[value=“”][禁用]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>
请尝试以下更改：
$("select").css("color", "#757575");
$(document).on("change", "select", function(){
if ($(this).val() != "") {
$(this).css("color", "");
}
else {
$(this).css("color", "#757575");
}
});
Angular 2的解决方案
在所选内容的顶部创建标签
<label class="hidden-label" for="IsActive"
*ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
[(ngModel)]="filterIsActive" id="IsActive">
<option value="true">true</option>
<option value="false">false</option>
</select>
并应用CSS将其放置在顶部
.hidden-label {
position: absolute;
margin-top: .34rem;
margin-left: .56rem;
font-style: italic;
pointer-events: none;
}
指针事件：none允许您在单击标签时显示select，当您选择选项时隐藏该选项。
角度html css
如果使用的是Angular，请执行以下操作：
<选择><option[ngValue]=“undefined”disabled selected>选择您的选项</option><option[ngValue]=“hurr”>Durr</option></选择>
