我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
在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;
}
}
}
其他回答
下面是一个工作示例，如何使用纯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>
2023年的解决方案：具有选择器：
选择：已（选项：已禁用：已选中[隐藏]）{颜色：灰色；}选择选项{颜色：黑色；}<选择><option selected disabled hidden>选择</option><option>一个</option><option>两个</option><option>三个</option></选择>
selected使页面加载时选择特定选项禁用可确保表单提交中排除该选项隐藏直观地隐藏下拉列表中的选项
<选择><option selected disabled hidden>选择选项</option><option>一个</option><option>两个</option><option>三个</option></选择>
您可以在不使用JavaScript和仅使用HTML的情况下执行此操作。您需要将默认的select选项设置为disabled=“”和selected=“”，并选择所需的标记=“”。浏览器不允许用户在未选择选项的情况下提交表单。
<form action="" method="POST">
<select name="in-op" required="">
<option disabled="" selected="">Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="submit" value="Submit">
</form>
基于Albireo的响应，该版本不使用jQuery，CSS的特异性更好。
const triggerEvent=（el，eventName）=>{let event=document.createEvent（'HTMLEvents'）event.initEvent（eventName，true，false）el.dispatchEvent（事件）}let select=document.querySelector（'.placeholder select'）select.addEventListener（'change'，（e）=>{e.target.classList[e.target.value==0？'add'：'remove']（'empty'）})triggerEvent（选择，“更改”）占位符选择选项{颜色：#000000；}占位符选择选项：第一个子项{颜色：#444444；字体样式：斜体；字号：粗体；}.占位符-选择为空{颜色：#7F7F7F；}<select class=“placeholder select”><option value=“0”selected=“selected”>选择</选项><option value=“1”>有些东西</option><option value=“2”>其他内容</option><option value=“3”>另一个选项</option></选择>
