我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
这个HTML+CSS解决方案对我很有用：
表单选择：无效{颜色：灰色；}表单选择选项：第一个子项{颜色：灰色；}表单选择：无效选项：不（：第一个子项）{颜色：黑色；}<表单><选择所需><option value=“”>选择行星</选项><option value=“earth”>地球</option>潘多拉</option></选择></form>
其他回答
如果您正在阅读并使用React，请使用defaultValue。
<option defaultValue>Select a country here</option>
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
selected使页面加载时选择特定选项禁用可确保表单提交中排除该选项隐藏直观地隐藏下拉列表中的选项
<选择><option selected disabled hidden>选择选项</option><option>一个</option><option>两个</option><option>三个</option></选择>
我只是在下面的选项中添加了一个隐藏属性。这对我来说很好。
<选择><option hidden>性别</option><option>男性</option><option>女性</option></选择>
2023年的解决方案：具有选择器：
选择：已（选项：已禁用：已选中[隐藏]）{颜色：灰色；}选择选项{颜色：黑色；}<选择><option selected disabled hidden>选择</option><option>一个</option><option>两个</option><option>三个</option></选择>
