我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
您需要表单验证，现代浏览器从头开始就提供了这一功能。
因此，您不必担心用户无法选择字段。因为当他这样做时，浏览器验证会告诉他，这是一个错误的选择。
浏览器内置的验证函数checkValidatity（）。
Bootstrap也有一个很好的例子。
HTML
<form class="needs-validation">
<select required>
<option value="">Please select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<form>
Java脚本
form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
//form validation succeeded
} else {
//form validation failed
}
其他回答
这里有一个工作得很好的CSS解决方案。内容被添加（并且相对于容器绝对定位）在包含元素之后（通过：在伪类之后）。
它从我使用指令时定义的占位符属性（attr（占位符））中获取文本。另一个关键因素是指针事件：无-这允许单击占位符文本传递到选择。否则，如果用户单击文本，它不会下降。
我自己在select指令中添加了.empty类，但通常我发现angular为我添加/删除.ng是空的（我认为这是因为我在代码示例中注入了1.2版本的angular）。
（示例还演示了如何在AngularJS中包装HTML元素以创建自己的自定义输入）
var app=角度模块（“soDemo”，[]）；app.controller（“soDemoController”，函数（$scope）{var vm={}；vm.names=[{id:1，name:“乔恩”},{id:2，name:'乔'}, {id:3，name:“Bob”}, {id:4，name:'Jane'}];vm.nameId；$scope.vm=vm；});app.指令（'soSelect'，函数soSelect（）{var指令={限制：'E'，require:'ngModel'，范围：{“valueProperty”：“@”，“displayProperty”：“@”，“modelProperty”：“=”，“源”：“=”，},链接：链接，模板：getTemplate};return指令；/////////////////////////////////函数链接（范围、元素、属性、ngModelController）{init（）；回来/////////////实施函数init（）{initDataBinding（）；}函数initDataBinding（）{ng模型控制器$render=函数（）{if（scope.model==ngModelController.$viewValue）返回；scope.model=ngModelController$viewValue；}范围$watch（'model'，函数（newValue）{if（newValue==未定义）{element.addClass（'empty'）；回来}element.removeClass（'empty'）；ng模型控制器$setViewValue（newValue）；});}}函数getTemplate（元素，属性）{var属性=['ng模型=“模型”'，'ng必需=“true”'];if（angular.isDefined（attrs.placeholder））{attributes.push（'占位符=“｛｛占位符｝｝”'）；}var ngOptions=“”；if（angular.isDefined（attrs.valueProperty））{ngOptions+=“项。”+attrs.valueProperty+“as”；}ngOptions+=“项。”+attrs.displayProperty+'源中的项'；ngOptions+=“”；attributes.push（'ng-options=“'+ngOptions+'”'）；var html='<select'+attributes.join（''）+'></select>'；返回html；}});所以选择{位置：相对；}所以选择select{字体系列：'Helvetica'；显示：内联块；高度：24px；宽度：200px；填充：0 1px；字体大小：12px；颜色：#222；边框：1px实心#c7c7c7；边界半径：4px；}所以选择.空：之前{字体系列：'Helvetica'；字体大小：12px；内容：属性（占位符）；位置：绝对；指针事件：无；左：6px；顶部：3px；z索引：0；颜色：#888；}<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js“></script><div ng app=“soDemo”ng controller=“soDemoController”><so select value property=“id”display property=“name”source=“vm.names”ng model=“vm.nameId”placeholder=“（select name）”></so select></div>
我刚刚偶然发现了这个问题，下面是Firefox和Chrome的工作原理（至少）：
<style>选择：无效｛颜色：灰色；｝</style><表单><选择所需><option value=“”禁用所选隐藏>请选择</选项><option value=“0”>通电时打开（大多数阀门都这样做）</option><option value=“1”>通电时关闭，断电时自动打开</option></选择></form>
禁用选项可停止使用鼠标和键盘选择＜option＞，而仅使用“display：none”允许用户仍然通过键盘箭头进行选择。“display:none”样式只是让列表框看起来“不错”。
注意：在“占位符”选项上使用空值属性允许验证（必需属性）绕过“占位符”，因此如果选项未更改，但是必需的，则浏览器应提示用户从列表中选择一个选项。
更新（2015年7月）：
确认此方法在以下浏览器中有效：
谷歌Chrome-v.43.0.2357.132Mozilla Firefox-第39.0版Safari-v.8.0.7（占位符在下拉列表中可见，但不可选择）Microsoft Internet Explorer-v.11（占位符在下拉列表中可见，但不可选择）Project Spartan-v.15.10130（占位符在下拉列表中可见，但不可选择）
更新（2015年10月）：
我删除了style=“display:none”，改为支持广泛的HTML5属性hidden。隐藏元素具有与显示类似的特性：在Safari、Internet Explorer和（Project Spartan需要检查）中都没有，在下拉列表中该选项可见，但不可选择。
更新（2016年1月）：
当需要select元素时，它允许使用：invalid CSS伪类，该类允许您在select元素处于“占位符”状态时设置其样式。：由于占位符选项中的值为空，因此此处无效。
设置值后，将删除：invalid伪类。如果您愿意，也可以选择使用：valid。
大多数浏览器都支持这个伪类。Internet Explorer 10及更高版本。这对于自定义样式的选择元素最有效；在某些情况下，例如（Mac在Chrome/Safari中），您需要更改选择框的默认外观，以便显示某些样式，例如背景色和颜色。您可以在developer.mozilla.org上找到一些关于兼容性的示例和更多信息。
Chrome中的原生元素外观Mac：
在Chrome中使用更改的边框元素Mac：
非CSS-无JavaScript/jQuery答案：
<label>选项名称<选择><option value=“”disabled selected>选择您的选项</option><option value=“hurr”>Durr</option></选择></label>
更新（2021 12月）：
这适用于最新的Firefox、Chrome和Safari。正如评论中指出的那样，它过去不适用于许多浏览器。
为选择元素输入[type=“text”]样式占位符
以下解决方案模拟占位符，因为它与input[type=“text”]元素相关：
$（'.example'）.change（函数（）{$（this）.css（'color'，$（this）.val（）=='？'#999' : '#555');});.示例{颜色：#999；}.example>选项{颜色：#555；}.example>选项[value=“”]{颜色：#999；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“example”><option value=“”>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</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;
}
}
}
