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

我正在使用占位符进行文本输入,效果很好。但是我也想为我的选择框使用一个占位符。当然,我可以使用以下代码:

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

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

这只会使下拉菜单中的选项变为灰色(因此,单击箭头后):

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

答案

非 CSS - 没有 JavaScript / jQuery 答案:

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

我偶然发现了这个问题,以下是至少在 Firefox 和 Chrome 中有效的方法:

<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>

禁用”选项将停止同时使用鼠标和键盘选择<option> ,而仅使用'display:none'允许用户仍然通过键盘箭头进行选择。 'display:none'样式只会使列表框看起来 “nice”。

注意:在 “占位符” 选项上使用空value属性可以使验证(必填属性)变通使用 “占位符”,因此,如果该选项未更改但是必需的,浏览器应提示用户选择一个列表中的选项。

更新(2015 年 7 月):

确认此方法可在以下浏览器中使用:

  • 谷歌浏览器 - v.43.0.2357.132
  • Mozilla Firefox-39.0 版
  • Safari-v.8.0.7(占位符在下拉列表中可见,但无法选择)
  • Microsoft Internet Explorer-v.11(占位符在下拉列表中可见,但不能选择)
  • Project Spartan-v.15.10130(占位符在下拉列表中可见,但无法选择)

更新(2015 年 10 月):

我删除了style="display: none"以支持hidden的 HTML5 属性,该属性具有广泛的支持。 hidden元素具有与display: none类似的特征display: none在 Safari,Internet Explorer(项目 Spartan 需要检查)中没有,在下拉菜单中该option可见,但该option不可选择。

更新(2016 年 1 月):

required select元素required它允许使用:invalid CSS 伪类,当您处于select元素的 “占位符” 状态时,可以使用它来设置样式。 :invalid在这里工作,因为占位符option值为空。

一旦设置了值, :invalid伪类将被删除。如果愿意,您也可以选择使用:valid

大多数浏览器都支持此伪类。 Internet Explorer 10 及更高版本。这最适合使用自定义样式的select元素;在某些情况下(例如,Chrome / Safari 中的 Mac),您需要更改select框的默认外观,以便显示某些样式,例如background-colorcolor 。您可以在developer.mozilla.org 中找到一些示例以及有关兼容性的更多信息。

Chrome 中的本机元素外观 Mac:

在Chrome中选择框本机Mac

在 Chrome 中使用更改后的边框元素 Mac:

在Chrome中更改了选择框Mac

对于必填字段,现代浏览器中有一个纯 CSS 解决方案:

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

像这样:

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/

我只是在如下所示的option添加了一个隐藏属性。对我来说很好。

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>

下面的解决方案也可以在 Firefox 中运行,无需任何 JavaScript:

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

我遇到了同样的问题,在搜索时遇到了这个问题,在找到适合我的解决方案之后,我想与大家分享一下,以防有人可以从中受益。

这里是:

HTML:

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS:

.place_holder {
    color: gray;
}
option {
    color: #000000;
}

JavaScript:

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

在客户做出第一选择之后,就不需要灰色了,因此 JavaScript 代码删除了place_holder类。

感谢 @ user1096901,作为 Internet Explorer 浏览器的解决方法,如果再次选择第一个选项,则可以再次添加place_holder类:)

不需要任何 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标签上放置了禁用和选择属性,但是当我们还隐藏标签时,它将看起来更好。

通过在option标签上添加额外的隐藏属性,可以防止在选择 “Durr” 选项后重新选择 “Select your option” 选项。

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

这是我的:

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>