我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
在这里，我修改了大卫的答案（接受的答案）。在他的回答中，他将禁用和选定属性放在选项标签上，但当我们也放置隐藏标签时，它看起来会更好。
通过在选项标签上添加额外的隐藏属性，它将防止在选择“Durr”选项后重新选择“Select your option”选项。
<选择><option value=“”disabled selected hidden>选择您的选项</option><option value=“hurr”>Durr</option></选择>
其他回答
选择：焦点选项。文件夹{显示：无；}<选择><option selected=“selected”class=“holder”>请选择</option><option value=“1”>选项#1</option><option value=“2”>选项#2</option></选择>
下面是一个工作示例，如何使用纯JavaScript实现这一点，该JavaScript处理第一次单击后的选项颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#myselect {
color: gray;
}
</style>
</head>
<body>
<select id="myselect">
<option disabled selected>Choose Item
</option>
<option>Item 1
</option>
<option>Item 2
</option>
<option>Item 3
</option>
</select>
<script>
// Add event listener to change color in the first click
document.getElementById("myselect").addEventListener("click", setColor)
function setColor()
{
var combo = document.getElementById("myselect");
combo.style.color = 'red';
// Remove Event Listener after the color is changed at the first click
combo.removeEventListener("click", setColor);
}
</script>
</body>
</html>
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公司
在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和其他浏览器中都能正常工作，但我还没有检查。
