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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

基于Albireo的响应,该版本不使用jQuery,CSS的特异性更好。

const triggerEvent=(el,eventName)=>{let event=document.createEvent('HTMLEvents')event.initEvent(eventName,true,false)el.dispatchEvent(事件)}let select=document.querySelector('.placeholder select')select.addEventListener('change',(e)=>{e.target.classList[e.target.value==0?'add':'remove']('empty')})triggerEvent(选择,“更改”)占位符选择选项{颜色:#000000;}占位符选择选项:第一个子项{颜色:#444444;字体样式:斜体;字号:粗体;}.占位符-选择为空{颜色:#7F7F7F;}<select class=“placeholder select”><option value=“0”selected=“selected”>选择</选项><option value=“1”>有些东西</option><option value=“2”>其他内容</option><option value=“3”>另一个选项</option></选择>

其他回答

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

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

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

不需要任何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></选择>

使用类名包,这里有一个与我的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);
        }