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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

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

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

其他回答

用户不应在选择选项中看到占位符。我建议为占位符选项使用隐藏属性,并且您不需要为该选项选择所选属性。你可以把它放在第一位。

select:不(:有效){颜色:#999;}<选择所需><option value=“”hidden>选择您的选项</option><option value=“0”>第一个选项</option><option value=“1”>第二个选项</option></选择>

不需要任何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函数纠正了刷新错误。

我看到了正确答案的迹象,但要将所有答案结合起来,这将是我的解决方案:

选择{颜色:灰色;}期权{颜色:黑色;}选项[默认值]{显示:无;}<选择><option value=“”默认选择>选择您的选项</option><option value=“hurr”>Durr</option></选择>

基于MattW的回答,您可以在做出有效选择后,通过仅在占位符保持选中时有条件地隐藏它,使选择占位符选项在下拉菜单中可见(因此选择无效)。

select:必需:无效{颜色:灰色;}select:无效>选项[value=“”][禁用]{显示:无;}期权{颜色:黑色;}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>

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

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