我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
基于MattW的回答，您可以在做出有效选择后，通过仅在占位符保持选中时有条件地隐藏它，使选择占位符选项在下拉菜单中可见（因此选择无效）。
select：必需：无效{颜色：灰色；}select：无效>选项[value=“”][禁用]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>
其他回答
用户不应在选择选项中看到占位符。我建议为占位符选项使用隐藏属性，并且您不需要为该选项选择所选属性。你可以把它放在第一位。
select：不（：有效）{颜色：#999；}<选择所需><option value=“”hidden>选择您的选项</option><option value=“0”>第一个选项</option><option value=“1”>第二个选项</option></选择>
在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;
}
}
}
我希望SELECT为灰色，直到选中，因此对于这段HTML：
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
我添加了以下CSS定义：
select { color: grey; }
select:valid { color: black; }
它在Chrome/Safari和其他浏览器中都能正常工作，但我还没有检查。
这是我的贡献。火腿+咖啡脚本+SCSS
Haml
=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'
咖啡脚本
$('select').on 'change', ->
if $(this).val()
$(this).css('color', 'black')
else
$(this).css('color', 'gray')
$('select').change()
SCSS
select option {
color: black;
}
通过更改服务器代码和仅根据属性的当前值设置类样式，可以仅使用CSS，但这种方式似乎更简单、更干净。
$（'select'）.on（'change'，function（）{if（$（this）.val（））{return$（this）.css（'color'，'black'）；}其他{return$（this）.css（'color'，'gray'）；}});$（'select'）.change（）；选择选项{颜色：黑色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“form control”name=“user[country_id]”id=“user_country_id”><option value=“”>国家</option><option value=“231”>美国</option><option value=“1”>安道尔</option>阿富汗</option><option value=“248”>津巴布韦</option></select>
您可以添加更多的CSS（选择选项：firstchild），以在占位符打开时保持其灰色，但我并不在乎这一点。
基于MattW的回答，您可以在做出有效选择后，通过仅在占位符保持选中时有条件地隐藏它，使选择占位符选项在下拉菜单中可见（因此选择无效）。
select：必需：无效{颜色：灰色；}select：无效>选项[value=“”][禁用]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>
