我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。

这只会使下拉列表中的选项变灰(因此单击箭头后):

option:first {
    color: #999;
}

问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。

使用此选项会导致所选值始终为灰色(即使在选择实际选项后):

select {
    color: #999;
}

当前回答

基于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></选择>

其他回答

选择:焦点选项。文件夹{显示:无;}<选择><option selected=“selected”class=“holder”>请选择</option><option value=“1”>选项#1</option><option value=“2”>选项#2</option></选择>

这里有一个工作得很好的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>

2023年的解决方案:具有选择器:

选择:已(选项:已禁用:已选中[隐藏]){颜色:灰色;}选择选项{颜色:黑色;}<选择><option selected disabled hidden>选择</option><option>一个</option><option>两个</option><option>三个</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/

如果使用的是Angular,请执行以下操作:

<选择><option[ngValue]=“undefined”disabled selected>选择您的选项</option><option[ngValue]=“hurr”>Durr</option></选择>