我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
使用类名包，这里有一个与我的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);
}
其他回答
selected使页面加载时选择特定选项禁用可确保表单提交中排除该选项隐藏直观地隐藏下拉列表中的选项
<选择><option selected disabled hidden>选择选项</option><option>一个</option><option>两个</option><option>三个</option></选择>
非CSS-无JavaScript/jQuery答案：
<label>选项名称<选择><option value=“”disabled selected>选择您的选项</option><option value=“hurr”>Durr</option></选择></label>
更新（2021 12月）：
这适用于最新的Firefox、Chrome和Safari。正如评论中指出的那样，它过去不适用于许多浏览器。
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中，我们可以添加一个选项作为占位符，它可以隐藏在选项下拉列表中。我们甚至可以添加一个自定义下拉图标作为背景，代替浏览器下拉图标。
技巧是仅在未选择值时启用占位符css
/**我的组件模板*/
<div class="dropdown">
<select [ngClass]="{'placeholder': !myForm.value.myField}"
class="form-control" formControlName="myField">
<option value="" hidden >Select a Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
/**我的组件.TS*/
constructor(fb: FormBuilder) {
this.myForm = this.fb.build({
myField: ''
});
}
/**全局.scss*/
.dropdown {
width: 100%;
height: 30px;
overflow: hidden;
background: no-repeat white;
background-image:url('angle-arrow-down.svg');
background-position: center right;
select {
background: transparent;
padding: 3px;
font-size: 1.2em;
height: 30px;
width: 100%;
overflow: hidden;
/*For moz*/
-moz-appearance: none;
/* IE10 */
&::-ms-expand {
display: none;
}
/*For chrome*/
-webkit-appearance:none;
&.placeholder {
opacity: 0.7;
color: theme-color('mutedColor');
}
option {
color: black;
}
}
}
基于MattW的回答，您可以在做出有效选择后，通过仅在占位符保持选中时有条件地隐藏它，使选择占位符选项在下拉菜单中可见（因此选择无效）。
select：必需：无效{颜色：灰色；}select：无效>选项[value=“”][禁用]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>
