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

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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

不需要任何JavaScript或CSS，只需要三个属性：

<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函数纠正了刷新错误。

2018-02-24 07:54:16

其他回答

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

2019-01-24 15:11:56

我刚刚偶然发现了这个问题，下面是Firefox和Chrome的工作原理（至少）：

禁用选项可停止使用鼠标和键盘选择＜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：

2011-12-09 08:22:14

我希望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和其他浏览器中都能正常工作，但我还没有检查。

2017-06-07 07:56:43

这里有一个工作得很好的CSS解决方案。内容被添加（并且相对于容器绝对定位）在包含元素之后（通过：在伪类之后）。

它从我使用指令时定义的占位符属性（attr（占位符））中获取文本。另一个关键因素是指针事件：无-这允许单击占位符文本传递到选择。否则，如果用户单击文本，它不会下降。

我自己在select指令中添加了.empty类，但通常我发现angular为我添加/删除.ng是空的（我认为这是因为我在代码示例中注入了1.2版本的angular）。

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

2017-06-08 22:12:50

我喜欢这个被接受的解决方案，而且它在没有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; }

2019-01-16 18:34:57

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

推荐文章

最新文章

标签