我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<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></选择>
其他回答
类似于：
HTML格式：
<select id="choice">
<option value="0" selected="selected">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
CSS:
#choice option { color: black; }
.empty { color: gray; }
JavaScript：
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
工作示例：http://jsfiddle.net/Zmf6t/
我目前无法使用这些选项，因为对我来说（1）不需要，（2）需要返回默认可选选项。因此，如果您使用jQuery，这里有一个很严厉的选项：
var$selects=$（'select'）；$selects.change（函数（）{var option=$（'选项：默认'，this）；if（option&&option.is（'：selected'））{$（this）.css（'color'，'#999'）；}其他{$（this）.css（'color'，'#555'）；}});$selects.each（函数）{$（this）.change（）；});期权{颜色：#555；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select name=“in op”><option default selected>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>
我遇到了同样的问题，在搜索时我遇到了这个问题，在我找到了一个好的解决方案后，我想和你们分享一下，以防有人从中受益。
这里是：
HTML格式：
<select class="place_holder dropdown">
<option selected="selected" style=" display: none;">Sort by</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>
CSS:
.place_holder {
color: gray;
}
option {
color: #000000;
}
JavaScript：
jQuery(".dropdown").change(function () {
jQuery(this).removeClass("place_holder");
});
在客户进行第一次选择后，不需要灰色，因此JavaScript代码删除了place_holder类。
多亏了@user1096901，作为Internet Explorer浏览器的解决方案，您可以再次添加place_holder类，以防再次选择第一个选项：）
这对我来说很好：
<select class="form-control">
<option value="" readonly="true" hidden="true" selected>Select your option</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
这里有一个工作得很好的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>
