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

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

其他回答

我目前无法使用这些选项,因为对我来说(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></选择>

我刚刚偶然发现了这个问题,下面是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:

我喜欢这个被接受的解决方案,而且它在没有JavaScript的情况下工作得很好。

我只想补充一下,我是如何对一个受控选择的React组件采用这个答案的,因为我花了几次时间才弄清楚。合并react select并使用它将非常简单,但除非您需要这个存储库提供的惊人功能,而我不需要这个功能,否则就不需要在我的捆绑包中添加更多的KB。注意,react select通过各种输入和html元素的复杂系统处理select中的占位符。

在React中,对于受控组件,不能将所选属性添加到选项中。React通过select本身的value属性以及一个更改处理程序来处理select的状态,其中值应该与选项本身中的一个value属性匹配。

例如

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

既然将所选属性添加到其中一个选项中是不正确的,而且实际上会引发错误,那么该怎么办?

只要你想一想,答案很简单。既然我们希望我们的第一个选项被选中、禁用和隐藏,我们需要做三件事:

将隐藏和禁用的属性添加到第一个定义的选项。将第一个选项的值设置为空字符串。将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; }

下面是一个工作示例,如何使用纯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>

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