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

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

其他回答

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

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

为选择元素输入[type=“text”]样式占位符

以下解决方案模拟占位符,因为它与input[type=“text”]元素相关:

$('.example').change(函数(){$(this).css('color',$(this).val()=='?'#999' : '#555');});.示例{颜色:#999;}.example>选项{颜色:#555;}.example>选项[value=“”]{颜色:#999;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“example”><option value=“”>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</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/

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

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

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