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

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

其他回答

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

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

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

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

这是我的贡献。火腿+咖啡脚本+SCSS

Haml

=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'

咖啡脚本

  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()

SCSS

select option {
  color: black;
}

通过更改服务器代码和仅根据属性的当前值设置类样式,可以仅使用CSS,但这种方式似乎更简单、更干净。

$('select').on('change',function(){if($(this).val()){return$(this).css('color','black');}其他{return$(this).css('color','gray');}});$('select').change();选择选项{颜色:黑色;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“form control”name=“user[country_id]”id=“user_country_id”><option value=“”>国家</option><option value=“231”>美国</option><option value=“1”>安道尔</option>阿富汗</option><option value=“248”>津巴布韦</option></select>

您可以添加更多的CSS(选择选项:firstchild),以在占位符打开时保持其灰色,但我并不在乎这一点。