如何为“选择”框创建占位符？

时间：2011-04-27 13:39:16

标签： html css html5 html-select placeholder

我正在使用占位符进行文本输入，效果很好。但我也想为我的选择框使用占位符。当然我可以使用这段代码：

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

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

这只会使下拉列表中的选项变为灰色（因此点击箭头后）：

option:first {
    color: #999;
}

编辑：问题是：人们如何在选择框中创建占位符？但它已经得到了回答，欢呼。

使用此选项会导致所选值始终为灰色（即使选择了实际选项后）：

select {
    color:#999;
}

37 个答案:

答案 0 :(得分：2645)

非CSS怎么样 - 没有javascript / jQuery的答案？

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

答案 1 :(得分：721)

偶然发现了这个问题，这里有什么适用于FireFox＆amp; Chrome（至少）

<style>
    select:invalid { color: gray; }
</style>
<form>
    <select required>
        <option value="" disabled selected hidden>Please Choose...</option>
        <option value="0">Open when powered (most valves do this)</option>
        <option value="1">Closed when powered, auto-opens when power is cut</option>
    </select>
</form>

“已禁用”选项会停止使用鼠标和键盘选择<option>，而只需使用'display:none'，用户仍可通过键盘箭头进行选择。 'display:none'样式只会使列表框看起来“不错”。

注意：在“占位符”选项上使用空value属性允许验证（必需属性）解决“占位符”，因此如果选项未更改但需要;浏览器应提示用户从列表中选择一个选项。

更新（2015年7月）：

此方法在以下浏览器中得到确认：

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7（占位符在下拉列表中可见，但不可选）
  • Microsoft Internet Explorer - v.11（占位符在下拉列表中可见，但不可选）
  • Project Spartan - v.15.10130（占位符在下拉列表中可见，但不可选择）

更新（2015年10月）：

删除了style="display: none"，转而支持广泛支持的HTML5属性hidden。 hidden元素与Safari，IE中的display: none具有相似的特征（项目Spartan需要检查），其中option在下拉列表中可见，但不可选择。

更新（2016年1月）：

当select元素为required时，它允许使用:invalid CSS伪类，允许您在select元素处于“占位符”状态时设置其样式。由于占位符:invalid中的空值，option在这里工作。

设置值后，:invalid伪类将被删除。如果您愿意，也可以选择使用:valid。

大多数浏览器都支持这种伪类。 IE10 +。这适用于自定义样式的select元素;在某些情况下（例如Chrome / Safari中的Mac），您需要更改select框的默认外观，以便显示某些样式，即background-color，color。您可以在developer.mozilla.org找到一些示例以及有关兼容性的更多信息。

Chrome中的原生元素外观Mac：

Select box native Mac in Chrome

在Chrome中使用更改的边框元素Mac：

Altered select box Mac in Chrome

答案 2 :(得分：217)

对于必填字段，现代浏览器中有一个纯CSS解决方案：

＆＃13;
＆＃13; 
select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
＆＃13; 
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：100)

这样的事可能吗？

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/

答案 4 :(得分：40)

我刚刚在下面的选项中添加了隐藏属性，它对我来说很好。

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>

答案 5 :(得分：29)

该解决方案也适用于FireFox：
没有任何JS。 

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

答案 6 :(得分：23)

我遇到了同样的问题，在搜索时遇到了这个问题，在我找到好的解决方案后，我想与你们分享，以防有人可以从中受益。 这里是： 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;
}

JS：

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

客户首先选择不需要灰色，因此JS删除了类place_holder。 我希望这有助于某人：）

更新：感谢@ user1096901，作为IE浏览器的解决方案，如果再次选择第一个选项，您可以再次添加place_holder课程。）

答案 7 :(得分：19)

不需要任何JS或CSS，只需要3个属性：

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

它根本不显示选项，只是将选项的值设置为默认值。

但是，如果您只是不喜欢与其他颜色相同的占位符，则可以像这样内联修复：

<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>

<body onload="document.getElementById('mySelect').selectedIndex = 0">

<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">
  <option value="" hidden>Select your beverage</option> <!-- placeholder -->
  <option value="water" style="color:black" >Water</option>
  <option value="milk" style="color:black" >Milk</option>
  <option value="soda" style="color:black" >Soda</option>
</select>

</body>
</html>

显然，您可以将函数和至少select的CSS分离为单独的文件。

注意： onload函数可以纠正刷新错误。

答案 8 :(得分：13)

这里我修改了大卫的答案（接受了答案）。在他的回答中，他在选项标签上添加了禁用和选择的属性，但是当我们也放置隐藏标签时，它看起来会更好。 通过在选项标签上添加额外的隐藏属性，将阻止＆＃34;选择您的选项＆＃34;在＆＃34; Durr＆＃34;之后重新选择的选项选项已被选中。

＆＃13;
＆＃13; 
<select>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="hurr">Durr</option>
</select>
＆＃13;
＆＃13;
＆＃13;

答案 9 :(得分：13)

这是我的

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

答案 10 :(得分：13)

我看到了正确答案的迹象，但将这一切结合在一起这将是我的解决方案。

＆＃13;
＆＃13; 
select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
＆＃13; 
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>
＆＃13;
＆＃13;
＆＃13;

答案 11 :(得分：6)

用户不应在选择选项中看到占位符。我建议对占位符选项使用hidden属性，而对于该选项则不需要selected属性，只需将其放在第一个即可。

select:not(:valid){
  color: #999;
}
<select required>
        <option value="" hidden>Select your option</option>
        <option value="0">First option</option>
        <option value="1">Second option</option>
    </select>

答案 12 :(得分：5)

建立在MattW's answer的基础上，可以在做出有效选择后使下拉菜单中的“选择占位符”选项可见，方法是仅在保留占位符的情况下才有条件地将其隐藏（因此，选择为：无效）。

select:required:invalid {
  color: gray;
}
select:invalid > option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
    <option value="" disabled selected>Select something...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

答案 13 :(得分：4)

如果您使用的是角形，请像这样

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>

答案 14 :(得分：4)

JS的另一种可能性：

 $('body').on('change','select', function (ev){
    if($(this).find('option:selected').val() == ""){
        $(this).css('color','#999');
        $(this).children().css('color','black');
    }
    else {
        $(this).css('color','black');
        $(this).children().css('color','black');
    }
});

JSFiddle

答案 15 :(得分：3)

您可以将第一个选项的颜色设置为gray，将其显示设置为none，将select的颜色设置为gray，然后添加一个{{1 }}的事件监听器，将其颜色设置为input。

black
select > option:not(:first-of-type) {
  color: black;
}

使用<select style='color:gray' oninput='style.color="black"'> <option style='display:none'> Choose an option </option> <option> 1 </option> <option> 2 </option> <option> 3 </option> </select> API：

customElement
class placeholderSelect extends HTMLElement {
  connectedCallback() {
    this.outerHTML = `<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    ${this.getAttribute('data-placeholder')}
  </option>
  ${this.innerHTML}
</select>`

    Array.from(this.children).forEach(function(el, i) {
      if (i !== 0) {
        el.style.color = 'black'
      }
    })
  }
}

customElements.define('placeholder-select', placeholderSelect)

答案 16 :(得分：3)

查看此答案：

<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>

答案 17 :(得分：2)

输入from tkinter import * import random global dice, keep dice = [1,2,3,4,5] keep = [-1,-1,-1,-1,-1] def holdDie1(dice): x = die1.cget("bg") if x == "white": die1.configure(bg="coral") keep[0] = dice[0] else: die1.configure(bg="white") keep[0] = -1 window = Tk() window.title("Dice") window.configure(background="white") die1 = Label(window, bg="white", text = dice[0], width=6, borderwidth=1, font="none 12 bold", relief="solid") die1.grid(row=1, column=0, padx=6) die1.bind("<Button-1>", holdDie1) 选择元素的样式占位符

以下解决方案模拟与[type="text"]元素相关的占位符：

＆＃13;
＆＃13; 
input[type="text"]
＆＃13; 
$('.example').change(function () {
  $(this).css('color', $(this).val() === '' ? '#999' : '#555');
});
＆＃13; 
.example {
  color: #999;
}

.example > option {
  color: #555;
}

.example > option[value=""] {
  color: #999;
}
＆＃13;
＆＃13;
＆＃13;

答案 18 :(得分：2)

您需要表单验证，现代浏览器从头开始提供此功能。

因此，您不必担心用户无法选择该字段。因为当他这样做时，浏览器验证将告诉他这是一个错误的选择。

内置验证功能的浏览器checkValidity()。

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>

JavaScript 

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}

答案 19 :(得分：2)

此HTML + CSS解决方案为我工作：

form select:invalid {
  color: gray;
}

form select option:first-child {
  color: gray;
}

form select:invalid option:not(:first-child) {
  color: black;
}
<form>
  <select required>
    <option value="">Select Planet...</option>
    <option value="earth">Earth</option>
    <option value="pandora">Pandora</option>
  </select>
</form>

祝你好运...

答案 20 :(得分：2)

我目前无法使用其中任何一个，因为对我而言，（1）不需要，（2）需要选项返回默认选择。所以如果你使用jquery，这里是一个沉重的选择：

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')){
          $(this).css('color','#999');
  }
  else{
          $(this).css('color','#555');
  }
});

$selects.each(function(){
  $(this).change();
});
option{
    color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

答案 21 :(得分：2)

这是一个非常有效的 CSS 解决方案。在包含元素（ via：after pseudo-class ）之后添加内容（并相对于容器绝对定位）。它从我在使用指令（ attr（占位符））时定义的占位符属性获取其文本。另一个关键因素是指针事件：无 - 这允许对占位符文本的点击传递给选择。否则，如果用户单击文本，则不会下拉。

我在我的select指令中自己添加 .empty 类但通常我发现angular为我添加/删除 .ng-empty （我认为它是b / c我在我的代码示例中注入了Angular 1.2版本）

（该示例还演示了如何在angularJS中包装HTML元素以创建自己的自定义输入） 

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;

  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;

    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }

    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }

  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }

});
so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #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>

答案 22 :(得分：1)

这里是working example如何使用纯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>

答案 23 :(得分：1)

我希望SELECT在选择之前是灰色的，这样对于这段HTML：

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

我添加了这些CSS定义：

select { color: grey; }
select:valid { color: black; }

它在Chrome / Safari中可以正常运行，也可能在其他浏览器中使用，但我还没有检查过。

答案 24 :(得分：1)

  

您可以不使用Javascript仅使用HTML来执行此操作您需要设置默认选择选项   disabled=""和selected=""以及选择标记required="".浏览器   不允许用户在不选择选项的情况下提交表单。

<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>

答案 25 :(得分：0)

我喜欢上面公认的解决方案，并且在没有JavaScript的情况下效果很好。

我只想补充一下我对受控选择React组件采取的答案，因为我花了一些力气才能弄清楚。合并并完成react-select真的很简单，但是除非您需要此repo提供的惊人功能，否则我不需要为相关项目提供任何功能，因此无需向其中添加任何KB我的包。请注意，react-select通过包含各种inputs和html元素的复杂系统来处理选择中的占位符。

在React中，对于controlled component，您无法将selected属性添加到您的选项中。 React通过value本身上的select属性以及更改处理程序来处理选择状态，该更改处理程序中的值应与选项本身内的value属性之一匹配。

例如

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

由于这是不适当的，并且实际上会在将selected属性添加到其中一个选项时引发错误，那么该怎么办？

一旦您想到答案，答案就很简单。由于我们希望第一个option既是selected也是disabled和hidden，所以我们需要做三件事：

  1. 将hidden和disabled属性添加到第一个定义的option。
  2. 将第一个option的值设置为空字符串。
  3. 将select的值初始化为一个空字符串。
state = { selectValue = "" } //state or props or their equivalent

// in the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
    {renderOptions()}
</select>

现在，您可以按照上面的指示设置选择的样式（或者，如果愿意，可以通过className 

select:invalid { color: gray; }

答案 26 :(得分：0)

尝试一下，对我来说很好

<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>

答案 27 :(得分：0)

由于此线程中提供的答案之间样式和功能多样，因此，下表澄清了所提供的每种HTML，HTML + CSS和HTML + CSS + Javascript解决方案的样式和适用的表单逻辑。

由于某种原因，在标记中使用了tables aren't permitted，因此我不得不使用代码格式。
将使用代码段提供HTML表，以解决表限制。

我已将此帖子标记为community wiki，因此任何人都可以详细描述新帖子，尽管请在其他帖子中添加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          |

答案 28 :(得分：0)

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

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

答案 29 :(得分：0)

基于Albireo's response，此版本不使用jQuery，并且CSS特异性更好。

const triggerEvent = (el, eventName) => {
  let event = document.createEvent('HTMLEvents')
  event.initEvent(eventName, true, false)
  el.dispatchEvent(event)
}

let select = document.querySelector('.placeholder-select')
select.addEventListener('change', (e) => {
  e.target.classList[e.target.value == 0 ? 'add' : 'remove']('empty')
})
triggerEvent(select, 'change')
.placeholder-select option {
  color: #000000;
}
.placeholder-select option:first-child {
  color: #444444;
  font-style: italic;
  font-weight: bold;
}
.placeholder-select.empty {
  color: #7F7F7F;
}
<select class="placeholder-select">
  <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>

答案 30 :(得分：0)

Angular 2的解决方案

在选择的顶部创建标签

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

并应用CSS将其放在顶部

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none允许您在单击标签时显示所选内容，而在选择选项时将其隐藏。

答案 31 :(得分：0)

在 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: ''
  });
}

/ ** global.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;
    }
  }
}

答案 32 :(得分：0)

我不满足于仅使用HTML / CSS的解决方案，因此我决定使用JS创建自定义select。

这是我在过去30分钟内所写的内容，因此可以进一步改进。

您所要做的就是创建一个包含少量数据属性的简单列表。代码会自动将列表转换为可选择的下拉列表。它还添加了一个隐藏的input来保存选定的值，因此可以在表单中使用它。

输入：

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

输出：

<div class="ul-select-container">
    <input type="hidden" name="role" class="hidden">
    <div class="selected placeholder">
        <span class="text">Role</span>
        <span class="icon">▼</span>
    </div>
    <ul class="select" data-placeholder="Role" data-name="role">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

应该是占位符的项目的文本显示为灰色。如果用户想要恢复他/她的选择，则可以选择占位符。同样使用CSS，可以克服select的所有缺点（例如，无法选择样式）。 

// helper function to create elements faster/easier
// https://github.com/akinuri/js-lib/blob/master/element.js
var elem = function(tagName, attributes, children, isHTML) {
  let parent;
  if (typeof tagName == "string") {
    parent = document.createElement(tagName);
  } else if (tagName instanceof HTMLElement) {
    parent = tagName;
  }
  if (attributes) {
    for (let attribute in attributes) {
      parent.setAttribute(attribute, attributes[attribute]);
    }
  }
  var isHTML = isHTML || null;
  if (children || children == 0) {
    elem.append(parent, children, isHTML);
  }
  return parent;
};
elem.append = function(parent, children, isHTML) {
  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {
    if (children instanceof Text || typeof children == "string" || typeof children == "number") {
      parent.value = children;
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  } else {
    if (children instanceof HTMLElement || children instanceof Text) {
      parent.appendChild(children);
    } else if (typeof children == "string" || typeof children == "number") {
      if (isHTML) {
        parent.innerHTML += children;
      } else {
        parent.appendChild(document.createTextNode(children));
      }
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  }
};


// initialize all selects on the page
$("ul.select").each(function() {
  var parent    = this.parentElement;
  var refElem   = this.nextElementSibling;
  var container = elem("div", {"class": "ul-select-container"});
  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});
  var selected  = elem("div", {"class": "selected placeholder"}, [
    elem("span", {"class": "text"}, this.dataset.placeholder),
    elem("span", {"class": "icon"}, "&#9660;", true),
  ]);
  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
  this.insertBefore(placeholder, this.children[0]);
  container.appendChild(hidden);
  container.appendChild(selected);
  container.appendChild(this);
  parent.insertBefore(container, refElem);
});

// update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
  var text     = this.innerText;
  var value    = this.dataset.value || "";
  var selected = this.parentElement.previousElementSibling;
  var hidden   = selected.previousElementSibling;
  hidden.value = selected.dataset.value = value;
  selected.children[0].innerText = text;
  if (this.classList.contains("placeholder")) {
    selected.classList.add("placeholder");
  } else {
    selected.classList.remove("placeholder");
  }
  selected.parentElement.classList.remove("visible");
});

// open select dropdown
$(".ul-select-container .selected").on("click", function() {
  if (this.parentElement.classList.contains("visible")) {
    this.parentElement.classList.remove("visible");
  } else {
    this.parentElement.classList.add("visible");
  }
});

// close select when focus is lost
$(document).on("click", function(e) {
  var container = $(e.target).closest(".ul-select-container");
  if (container.length == 0) {
    $(".ul-select-container.visible").removeClass("visible");
  }
});
.ul-select-container {
  width: 200px;
  display: table;
  position: relative;
  margin: 1em 0;
}
.ul-select-container.visible ul {
  display: block;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ul-select-container ul {
  background-color: white;
  border: 1px solid hsla(0, 0%, 60%);
  border-top: none;
  -webkit-user-select: none;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.ul-select-container ul li {
  padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
  opacity: 0.5;
}
.ul-select-container ul li:hover {
  background-color: dodgerblue;
  color: white;
}
.ul-select-container ul li.placeholder:hover {
  background-color: rgba(0, 0, 0, .1);
  color: initial;
}
.ul-select-container .selected {
  background-color: white;
  padding: 3px 10px 4px;
  padding: 2px 5px;
  border: 1px solid hsla(0, 0%, 60%);
  -webkit-user-select: none;
}
.ul-select-container .selected {
  display: flex;
  justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
  color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
  font-size: .7em;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.ul-select-container:hover .selected {
  border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

<ul class="select" data-placeholder="Sex" data-name="sex">
  <li data-value="male">Male</li>
  <li data-value="female">Female</li>
</ul>

更新：我对此进行了改进（使用向上/向下/输入键进行选择）。稍微整理输出并将其转换为对象。当前输出：

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow">▼</span>
    <ul class="select">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

初​​始化：

new Liselect(document.getElementsByTagName("ul")[0]);

进一步检查：JSFiddle，GitHub（已重命名）。

更新：再次重写此内容。我们可以使用select而不是列表。这样即使没有JS它也会工作（如果它被禁用）。

输入：

<select name="role" data-placeholder="Role" required title="Role">
    <option value="admin">Administrator</option>
    <option value="mod">Moderator</option>
    <option>User</option>
</select>


new Advancelect(document.getElementsByTagName("select")[0]);

输出：

<div class="advanced-select">
    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
    <span class="arrow">▼</span>
    <ul>
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li>User</li>
    </ul>
</div>

JSFiddle，GitHub。

答案 33 :(得分：0)

尝试此更改

$("select").css("color","#757575");
$(document).on("change","select",function(){
    if ($(this).val() != "") {
        $(this).css("color","");
    } else {
        $(this).css("color","#757575");
    }
});

答案 34 :(得分：-1)

这是我的贡献。 HAML + Coffeescript + SCSS

HAML 
=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'
Coffeescript 
  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()
SCSS 
select option {
  color: black;
}

通过更改服务器代码并仅根据属性的当前值设置类样式，可以仅使用CSS，但这种方式似乎更简单，更清晰。

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();
    select option {
      color: black;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

您可以添加更多CSS（select option:first-child）以在占位符打开时保持灰色，但我并不关心。

答案 35 :(得分：-1)

使用 classnames 包，这是一个适用于我的 React 功能组件的解决方案。我的组件使用钩子，但这对解决方案可能并不重要。这种方法是基于类的解决方案的功能性即兴演奏，这里很好地描述了...... https://www.derpturkey.com/select-placeholder-with-react/

组件JS...

function NavBar(props, prevProps) {
            const ClassNames = require("classnames");  // package needs require rather than import
            const [where, changeWhere] = useState("");  // my component's value
            // classnames will add placeholderSelect class if chosen option's value is empty
            let whereClass = ClassNames("myOtherStyleRules", {
                placeholderSelect: !where,
            });
            ...
            return (
            ...
            <div id="where">
                            <select
                              className={whereClass}
                              value={where}
                              ...
                            >
                              <option value="" hidden> where? </option>    //  value must be empty, hidden from choice
                              <option value="24">Anchorage</option>
                              <option value="27">Birmingham</option>
                              <option value="28">Detroit</option>
                              <option value="25">Los Angeles</option>
                              <option value="26">Oahu</option>
                              <option value="29">Seattle</option>
                            </select>
                ...

组件 CSS...

        .placeholderSelect {
          color: rgb(167, 167, 167);
        }

答案 36 :(得分：-6)

关于上述所有解决方案，但由于HTML规范，这个似乎最有效： 

<select>
  <optgroup label="Your placeholder">
    <option value="value">Label</option>
  </optgroup>
</select>

更新：请原谅我这个错误的答案，这绝对不是select元素的占位符解决方案，而是打开的select元素列表下的分组选项的标题

相关问题
最新问题