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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

看到这个答案:

<select>
        <option style="display: none;" value="" selected>SelectType</option>
        <option value="1">Type 1</option>
        <option value="2">Type 2</option>
        <option value="3">Type 3</option>
        <option value="4">Type 4</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>

由于本主题中提供的答案之间的样式和功能不同,下表阐明了所提供的HTML、HTML+CSS和HTML+CSS+Javascript解决方案的样式和适用的表单逻辑。

我不得不使用代码格式,因为出于某种原因,标记中不允许使用表。将使用代码段提供一个HTML表来解决表限制。

我将这篇文章标记为社区维基,这样任何人都可以详细介绍新的文章,但请将JQuery、React、Angular、CoffeeScript等添加到另一篇文章中,以保持此表的简单。

         | Technologies |                                                                Styling                                                                |
  Post   | CSS | Java-  | Select: Placeholder |  Select: valid option  |                  Option: placeholder                    |     Option: valid option     |
   ID    |     | script | Color |  Validation | Color |    Required    | Visibility | Selectable | Color |   Cond. formatting    | Color |   Cond. formatting   |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
41167307 | No  |   No   | Black |   Invalid   | Black |      Yes       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50200912 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5859221  | No  |   No   | Black |    Valid    | Black |       No       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
38120777 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
54860799 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
52661024 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
8442831  | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
29806043 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
61966461 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  | select:valid{visible} | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
44406771 | Yes |   No   | Grey  |   Invalid   | Grey  |      No        |  Visible   |     No     | Grey  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
40603035 | Yes |   No   | Black |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
22994211 | Yes |   No   | Grey  |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
21722343 | Yes |   No   | Grey  |    Valid    | Grey  |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
48960650 | Yes |  Yes   | Grey  |   Invalid   | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5805194  | Yes |  Yes   | Grey  |    Valid    | Black |      No        |  Visible   |    Yes     | Black |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50840409 | Yes |  Yes   | Grey  |    Valid    | Black |      Yes       |  Visible   |    Yes     | Grey  |          No           | Black |          No          |

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

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

HTML中有Cool属性,您可以使用它为select属性创建占位符在我的情况下,我使用以下代码,您可以根据您的要求更改它

 <select ref={relationship} required className="sellertype">
          <option value="" disabled selected hidden>Select Your Seller Type</option>
          <option value="1">Importer</option>
          <option value="2">Exporter</option>
          <option value="3">Local Seller</option>
          <option value="4">Local Buyer</option>
        </select>

现在“选择卖家类型”将作为占位符

如果您正在阅读并使用React,请使用defaultValue。

<option defaultValue>Select a country here</option>