Html 如何为“选择”框制作占位符？

How do I make a placeholder for a 'select' box?

提问by Thomas

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code:

我正在使用占位符进行文本输入，效果很好。但我也想为我的选择框使用占位符。当然我可以只使用这个代码：

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

But the 'Select your option' is in black instead of lightgrey. So my solution could possibly be CSS-based. jQuery is fine too.

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

This only makes the option grey in the dropdown (so after clicking the arrow):

这只会使下拉列表中的选项变灰（因此在单击箭头后）：

option:first {
    color: #999;
}

The question is: How do people create placeholders in selectboxes? But it has already been answered, cheers.

问题是：人们如何在选择框中创建占位符？但它已经得到了回答，干杯。

And using this results in the selected value always being grey (even after selecting a real option):

并且使用此结果会导致所选值始终为灰色（即使在选择了实物期权之后）：

select {
    color: #999;
}

回答by David

A non-CSS - no JavaScript/jQuery answer:

非 CSS - 没有 JavaScript/jQuery 答案：

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

回答by William Isted

I just stumbled across this question, and here's what works in Firefox and Chrome (at least):

我只是偶然发现了这个问题，这是在 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>

The Disabledoption stops the <option>being selected with both mouse and keyboard, whereas just using 'display:none'allows the user to still select via the keyboard arrows. The 'display:none'style just makes the list box look 'nice'.

所述禁用选项停止<option>用鼠标和键盘选择的存在，而只是使用'display:none'允许用户通过键盘箭头仍然选择。该'display:none'样式只是使列表框看起来“不错”。

Note: Using an empty valueattribute on the "placeholder" option allows validation (required attribute) to work around having the "placeholder", so if the option isn't changed, but is required, the browser should prompt the user to choose an option from the list.

注意：value在“占位符”选项上使用空属性允许验证（必需属性）绕过“占位符”，因此如果该选项没有更改，但是是必需的，浏览器应提示用户选择一个选项从列表中。

Update (July 2015):

更新（2015 年 7 月）：

This method is confirmed working in the following browsers:

此方法已确认在以下浏览器中有效：

• Google Chrome - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7 (the placeholder is visible in dropdown, but it is not selectable)
• Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)
• Project Spartan - v.15.10130 (the placeholder is visible in dropdown, but it is not selectable)

• 谷歌浏览器 - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7（占位符在下拉列表中可见，但不可选）
• Microsoft Internet Explorer - v.11（占位符在下拉列表中可见但不可选）
• Project Spartan - v.15.10130（占位符在下拉列表中可见，但不可选）

Update (October 2015):

更新（2015 年 10 月）：

I removed the style="display: none"in favour of HTML5 attribute hiddenwhich has wide support. The hiddenelement has similar traits as display: nonein Safari, Internet Explorer, (Project Spartan needs checking) where the optionis visible in dropdown, but it is not selectable.

我删除了style="display: none"支持hidden广泛支持的 HTML5 属性。该hidden元素具有与display: noneSafari、Internet Explorer相似的特征（Project Spartan 需要检查），其中option可以在下拉列表中看到，但不可选择。

Update (January 2016):

更新（2016 年 1 月）：

When the selectelement is requiredit allows use of the :invalidCSS pseudo-class which allows you to style the selectelement when in its "placeholder" state. :invalidworks here because of the empty value in the placeholder option.

当select元素是required它时，它允许使用:invalidCSS 伪类，它允许您在select元素处于“占位符”状态时为其设置样式。:invalid由于占位符中的空值，因此在这里工作option。

Once a value has been set, the :invalidpseudo-class will be dropped. You can optionally also use :validif you so wish.

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

Most browsers support this pseudo-class. Internet Explorer 10 and later. This works best with custom styled selectelements; in some cases i.e. (Mac in Chrome / Safari) you'll need to change the default appearance of the selectbox so that certain styles display, i.e., background-colorand color. You can find some examples and more about compatibility at developer.mozilla.org.

大多数浏览器都支持这个伪类。Internet Explorer 10 及更高版本。这对自定义样式select元素最有效；在某些情况下，即（Chrome / Safari 中的 Mac）您需要更改select框的默认外观，以便显示某些样式，即，background-color和color. 您可以在developer.mozilla.org找到一些示例和更多关于兼容性的信息。

Native element appearance Mac in Chrome:

Chrome 中的原生元素外观 Mac：

Using altered border element Mac in Chrome:

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

回答by MattW

For a required field, there is a pure-CSS solution in modern browsers:

对于必填字段，现代浏览器中有一个纯 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>

回答by Albireo

Something like this:

像这样的东西：

HTML:

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:

CSS：

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

JavaScript：

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

Working example: http://jsfiddle.net/Zmf6t/

工作示例：http: //jsfiddle.net/Zmf6t/

回答by Ajithkumar S

I just added a hidden attribute in an optionlike below. It is working fine for me.

我只是在option下面的类似中添加了一个隐藏属性。它对我来说很好。

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

回答by Dani-Br

The solution below works in Firefox also, without any JavaScript:

下面的解决方案也适用于 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>

回答by rramiii

I had the same problem and while searching I came across this question, and after I found a good solution for me, I would like to share it with you guys in case some one can benefit from it.

我遇到了同样的问题，在搜索时遇到了这个问题，在为我找到了一个很好的解决方案后，我想与你们分享，以防有人可以从中受益。

Here it is:

这里是：

HTML:

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:

CSS：

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

JavaScript:

JavaScript：

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

After the customer makes the first select, there isn't any need for gray color, so the JavaScript code removes the class place_holder.

客户进行第一次选择后，就不需要灰色了，因此 JavaScript 代码删除了 class place_holder。

Thanks to @user1096901, as a workaround for the Internet Explorer browser, you can add the place_holderclass again in case the first option is selected again :)

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

回答by Jacob Schneider

There isn't any need for any JavaScript or CSS, just three attributes:

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

It doesn't show the option at all; it just sets the option's value as the default.

它根本不显示该选项；它只是将选项的值设置为默认值。

However, if you just don't like a placeholder that's the same color as the rest, you can fix it inline like this:

但是，如果您只是不喜欢与其余颜色相同的占位符，您可以像这样内联修复它：

<!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>

Obviously, you can separated the functions and at least the select's CSS into separate files.

显然，您可以将函数和至少选择的 CSS 分离到单独的文件中。

Note:the onload function corrects a refresh bug.

注意：onload 函数修正了一个刷新错误。

回答by Roman Yakoviv

The user should not see the placeholder in select options. I suggest to use the hiddenattribute for the placeholder option, and you don't need the selectedattribute for this option. You can just put it as the first.

用户不应在选择选项中看到占位符。我建议使用hidden占位符选项的属性，并且您不需要selected此选项的属性。你可以把它作为第一个。

select:not(:valid) {
  color: #999;
}

<select required>
    <option value="" hidden>Select your option</option>
    <option value="0">First option</option>
    <option value="1">Second option</option>
</select>

回答by Nawaraj

Here I have modified David's answer(accepted answer). On his answer, he put disabled and selected attribute on the optiontag, but when we also put hidden tag then it will look much better.

在这里，我修改了大卫的答案（接受的答案）。在他的回答中，他在option标签上放置了禁用和选择属性，但是当我们也放置隐藏标签时，它看起来会好得多。

By adding an extra hidden attribute on the optiontag, it will prevent the "Select your option" option from being re-selecting after the "Durr" option is selected.

通过在option标签上添加一个额外的隐藏属性，它可以防止在选择“Durr”选项后重新选择“选择你的选项”选项。

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