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

A

Andy

非 CSS - 没有 JavaScript/jQuery 答案：

选项名称

更新（2021 年 12 月）：

这适用于最新的 Firefox、Chrome 和 Safari。正如评论中指出的那样，它过去不适用于许多浏览器。

Firefox (10) 不显示禁用选项作为默认选择（占位符）。它默认显示下一个，在本例中为“Durr”。

一旦用户选择了一个值，他就不能再次取消选择（即使选择值是可选的）！

在 Chrome 95 中进行测试，它也不会将禁用的项目显示为占位符。鉴于 Firefox 和 Chrome 是当今浏览器使用的主要份额，这对我来说不是解决方案。

2021 年 12 月，使用最新的 chrome 和 safari，我无法让框中显示的文本像初始占位符一样变灰（在弹出菜单中只有灰色）。这种技术不起作用。

我个人不喜欢这种解决方案，因为您无法通过重新选择“占位符”选项来删除您的选择。

P

Peter Mortensen

我只是偶然发现了这个问题，这就是 Firefox 和 Chrome 中的工作原理（至少）：

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

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

更新（2015 年 7 月）：

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

谷歌浏览器 - 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（占位符在下拉列表中可见，但不可选择）

更新（2015 年 10 月）：

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

更新（2016 年 1 月）：

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

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

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

Chrome 中的原生元素外观 Mac：

https://i.stack.imgur.com/L6cVA.png

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

https://i.stack.imgur.com/OWMDi.png

这个确实有效（2021 年 12 月，chrome/safari）。甚至可以在片段中使用，这与接受的答案的片段不同。

在我选择一个之前，下拉列表中的选项对我来说是灰色的。

d

dr.dimitru

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

选择：必需：无效 { 颜色：灰色； } option[value=""][disabled] { 显示：无； } 选项 { 颜色：黑色； }

一旦用户选择了一个值，他就不能再次取消选择（即使选择值是可选的）！

P

Peter Mortensen

以下解决方案也适用于 Firefox，无需任何 JavaScript：

选项 [默认] { 显示：无； }

一旦用户选择了一个值，他就不能再次取消选择（即使选择值是可选的）！

P

Peter Mortensen

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

这里是：

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 类，以防再次选择第一个选项 :)

P

Peter Mortensen

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

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

注意：onload 功能更正了刷新错误。

P

Peter Mortensen

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

选择：不（：有效）{颜色：#999； }

T

TylerH

选择：焦点选项。持有人{显示：无； }

您应该提供一些上下文来解释您的答案与接受的答案有何不同

它只使用一个没有任何 JQuery 和 CSS 的选择标签。使用属性 Disabled , selected & hidden

重点是帮助那些不了解这些属性的人。通常在 Stack Overflow 上并不能很好地接受一个只转储代码而没有解释的答案。

P

Peter Mortensen

我看到了正确答案的迹象，但要将它们放在一起，这将是我的解决方案：

选择{颜色：灰色； } 选项 { 颜色：黑色； } 选项[默认] { 显示：无； }

P

Peter Mortensen

如果您使用的是 Angular，请执行以下操作：

T

TylerH

这个 HTML + CSS 解决方案对我有用：

表单选择：无效 { 颜色：灰色； } 表单选择选项：第一个孩子 { 颜色：灰色； } form select:invalid option:not(:first-child) { color: black; }

这对我来说似乎是最好的解决方案，但是如果您不希望该字段是必需的，而是可选的...？

s

shreyasm-dev

您可以将第一个选项的颜色设置为 gray，将其显示设置为 none，将 select 的颜色设置为 gray，然后添加一个 input 事件侦听器，将其颜色设置为 {6 }。

选择 > 选项：不（：第一个类型）{ 颜色：黑色； }

使用 customElement API：

类 placeholderSelect 扩展 HTMLElement { connectedCallback() { this.innerHTML = ``; Array.from(this.children[0].children).forEach(function(el, i) { el.style.color = 'black'; }); } } customElements.define('placeholder-select', placeholderSelect);

P

Peter Mortensen

JavaScript 中的另一种可能性：

 $('body').on('change', 'select', function (ev){
    if($(this).find('option:selected').val() == ""){
        $(this).css('color', '#999');
        $(this).children().css('color', 'black');
    }
    else {
        $(this).css('color', 'black');
        $(this).children().css('color', 'black');
    }
});

JSFiddle

M

Matthew Millar

在 MattW's answer 的基础上，您可以在做出有效选择后使选择占位符选项在下拉菜单中可见，方法是仅在占位符保持选中状态时有条件地隐藏它（因此选择是 :invalid）。

选择：必需：无效 { 颜色：灰色； } 选择：无效 > 选项 [值 =“”] [禁用] { 显示：无； } 选项 { 颜色：黑色； }

P

Peter Mortensen

我希望 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 和其他浏览器中按预期工作，但我没有检查。

P

Peter Mortensen

这是一个运行良好的 CSS 解决方案。内容被添加（并且相对于容器绝对定位）在包含元素之后（通过 :after 伪类）。

它从我使用指令（attr（占位符））定义的占位符属性中获取其文本。另一个关键因素是指针事件：无 - 这允许点击占位符文本传递给选择。否则，如果用户单击文本，它不会下拉。

我自己在我的选择指令中添加了 .empty 类，但通常我发现 Angular 为我添加/删除了 .ng-empty（我认为这是因为我在我的代码示例中注入了 Angular 的 1.2 版）。

（该示例还演示了如何在 AngularJS 中包装 HTML 元素以创建您自己的自定义输入）

P

Peter Mortensen

我目前无法让这些工作中的任何一个工作，因为对我来说（1）不需要并且（2）需要返回默认可选的选项。因此，如果您使用的是 jQuery，这里是一个笨拙的选择：

P

Peter Mortensen

我不满足于仅使用 HTML/CSS 的解决方案，因此我决定使用 JavaScript 创建一个自定义 select。

这是我在过去 30 分钟内写的东西，因此可以进一步改进。

您所要做的就是创建一个包含少量数据属性的简单列表。该代码会自动将列表转换为可选择的下拉列表。它还添加了一个隐藏的 input 来保存选定的值，因此它可以在表单中使用。

输入：

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

输出：

<div class="ul-select-container">
    <input type="hidden" name="role" class="hidden">
    <div class="selected placeholder">
        <span class="text">Role</span>
        <span class="icon">▼</span>
    </div>
    <ul class="select" data-placeholder="Role" data-name="role">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

应该是占位符的项目的文本显示为灰色。占位符是可选择的，以防用户想要恢复他/她的选择。同样使用 CSS，可以克服 select 的所有缺点（例如，无法设置选项的样式）。

// 更快/更轻松地创建元素的辅助函数 // https://github.com/akinuri/js-lib/blob/master/element.js var elem = function(tagName, attributes, children, isHTML) { let parent; if (typeof tagName == "string") { parent = document.createElement(tagName); } else if (tagName instanceof HTMLElement) { parent = tagName; } if (attributes) { for (let attribute in attributes) { parent.setAttribute(attribute, attributes[attribute]); } } var isHTML = isHTML ||无效的; if (children || children == 0) { elem.append(parent, children, isHTML); } 返回父级； }; elem.append = function(parent, children, isHTML) { if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) { if (children instanceof Text || typeof children == "string" || typeof children == "number") {父值=孩子； } else if (children instanceof Array) { children.forEach(function(child) { elem.append(parent, child); }); } else if (typeof children == "function") { elem.append(parent, children()); } } else { if (children instanceof HTMLElement || children instanceof Text) { parent.appendChild(children); } else if (typeof children == "string" || typeof children == "number") { if (isHTML) { parent.innerHTML += children; } else { parent.appendChild(document.createTextNode(children)); } } else if (children instanceof Array) { children.forEach(function(child) { elem.append(parent, child); }); } else if (typeof children == "function") { elem.append(parent, children()); } } }; // 初始化页面上的所有选择 $("ul.select").each(function() { var parent = this.parentElement; var refElem = this.nextElementSibling; var container = elem("div", {"class" : "ul-select-container"}); var hidden = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"}); var selected = elem("div", {"class": "selected placeholder"}, [ elem("span", {"class": "text"}, this.dataset.placeholder), elem("span", { "class": "icon"}, "▼", true), ]); var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder); this. insertBefore(placeholder, this.children[0]); container.appendChild(hidden); container.appendChild(selected); container.appendChild(this); parent.insertBefore(container, refElem); }); // 使用选中的选项更新必要的元素 $(".ul-select-container ul li").on("click", function() { var text = this.innerText; var value = this.dataset.value || ""; var selected = this.parentElement.previousElementSibling; var hidden = selected.previousElementSibling; hidden.value = selected.dataset.value = value; selected.children[0].innerText = text; if (this.classList.contains( "placeholder")) { selected.classList.add("placeholder"); } else { selected.classList.remove("placeholder"); } selected.parentElement.classList.remove("visible"); }); // 打开选择下拉菜单 $(".ul-select-container .selected").on("click", function() { if (this.parentElement.classList.contains("visible")) { this.parentElement.classList .remove("visible"); } else { this.parentElement.classList.add("visible"); } }); // 失去焦点时关闭选择 $(document).on("click", function(e) { var container = $(e.target).closest(".ul-select-container"); if (container.长度 == 0) { $(".ul-select-container.visible").removeClass("visible"); } }); .ul-select-container { 宽度：200px;显示：表格；位置：相对；边距：1em 0； } .ul-select-container.visible ul { 显示：块；填充：0；列表样式：无；边距：0； } .ul-select-container ul { 背景色：白色；边框：1px 实心 hsla(0, 0%, 60%);边框顶部：无； -webkit 用户选择：无；显示：无；位置：绝对；宽度：100%； z指数：999； } .ul-select-container ul li { padding: 2px 5px; } .ul-select-container ul li.placeholder { 不透明度：0.5; } .ul-select-container ul li:hover { background-color: dodgerblue;白颜色; } .ul-select-container ul li.placeholder:hover { background-color: rgba(0, 0, 0, .1);颜色：初始； } .ul-select-container .selected { 背景色：白色；填充：3px 10px 4px；填充：2px 5px；边框：1px 实心 hsla(0, 0%, 60%); -webkit 用户选择：无； } .ul-select-container .selected { display: flex; justify-content: 之间的空格； } .ul-select-container .selected.placeholder .text { 颜色：rgba(0, 0, 0, .5); } .ul-select-container .selected .icon { 字体大小：.7em;显示：弯曲；对齐项目：居中；不透明度：0.8； } .ul-select-container:hover .selected { 边框: 1px solid hsla(0, 0%, 30%); } .ul-select-container:hover .selected .icon { 不透明度: 1; }

管理员
版主
用户

男性
女性

更新：我对此进行了改进（使用向上/向下/输入键进行选择），稍微整理了输出，并将其变成了一个对象。电流输出：

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow">▼</span>
    <ul class="select">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

初始化：

new Liselect(document.getElementsByTagName("ul")[0]);

进一步检查：JSFiddle， ~~GitHub~~ （重命名）。

更新：我又重写了一遍。我们可以只使用选择，而不是使用列表。这样即使没有 JavaScript 也能工作（以防它被禁用）。

输入：

<select name="role" data-placeholder="Role" required title="Role">
    <option value="admin">Administrator</option>
    <option value="mod">Moderator</option>
    <option>User</option>
</select>

new Advancelect(document.getElementsByTagName("select")[0]);

输出：

<div class="advanced-select">
    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
    <span class="arrow">▼</span>
    <ul>
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li>User</li>
    </ul>
</div>

JSFiddle，GitHub。

P

Peter Mortensen

我喜欢 the accepted solution，它在没有 JavaScript 的情况下也能很好地工作。

我只是想补充一下我是如何为 受控选择 React 组件 采用这个答案的，因为我花了几次尝试才弄明白。合并 react-select 并完成它会非常简单，但除非您需要此存储库提供的惊人功能（我不针对有问题的项目），否则无需在我的包中添加更多千字节.请注意，react-select 通过各种 inputs 和 html 元素的复杂系统处理选择中的占位符。

在 React 中，对于 controlled component，您不能将 selected 属性添加到您的选项中。 React 通过 select 本身的 value 属性以及更改处理程序来处理选择的状态，其中值应与选项本身中的值属性之一匹配。

比如，例如

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

既然将 selected 属性添加到其中一个选项是不合适的并且实际上会引发错误，那么该怎么办？

仔细想想，答案很简单。由于我们希望我们的第一个 option 是 selected 以及 disabled 和 hidden，我们需要做三件事：

将 hidden 和 disabled 属性添加到第一个定义的选项。将第一个选项的值设置为空字符串。将 select 的值初始化为空字符串。

state = { selectValue = "" } // State or props or their equivalent

// In the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
    {renderOptions()}
</select>

现在，您可以按照上面的说明设置选择的样式（如果您愿意，也可以通过 className）。

select:invalid { color: gray; }

J

Jurik

您需要表单验证，现代浏览器从头开始提供此功能。

因此，您无需担心用户无法选择该字段。因为当他这样做时，浏览器验证会告诉他，这是一个错误的选择。

浏览器内置验证功能checkValidity()。

Bootstrap 也有一个很好的例子。

HTML

<form class="needs-validation">
  <select required>
    <option value="">Please select an option</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
  </select>
<form>

Javascript

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}

2

2 revs, 2 users 78%

由于此线程中提供的答案之间的样式和功能不同，下表阐明了所提供的每种 HTML、HTML+CSS 和 HTML+CSS+Javascript 解决方案的样式和适用的表单逻辑。

由于某种原因，我不得不使用代码格式，因为标记中的 tables aren't permitted。
将使用代码片段提供一个 HTML 表格来解决表格限制。

我已将此帖子标记为 community wiki，因此任何人都可以详细说明新帖子，但请在备用帖子中添加 JQuery、React、Angular、CoffeeScript 等，以使此表保持简单。

         | Technologies |                                                                Styling                                                                |
  Post   | CSS | Java-  | Select: Placeholder |  Select: valid option  |                  Option: placeholder                    |     Option: valid option     |
   ID    |     | script | Color |  Validation | Color |    Required    | Visibility | Selectable | Color |   Cond. formatting    | Color |   Cond. formatting   |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
41167307 | No  |   No   | Black |   Invalid   | Black |      Yes       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50200912 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5859221  | No  |   No   | Black |    Valid    | Black |       No       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
38120777 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
54860799 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
52661024 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
8442831  | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
29806043 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
61966461 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  | select:valid{visible} | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
44406771 | Yes |   No   | Grey  |   Invalid   | Grey  |      No        |  Visible   |     No     | Grey  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
40603035 | Yes |   No   | Black |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
22994211 | Yes |   No   | Grey  |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
21722343 | Yes |   No   | Grey  |    Valid    | Grey  |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
48960650 | Yes |  Yes   | Grey  |   Invalid   | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5805194  | Yes |  Yes   | Grey  |    Valid    | Black |      No        |  Visible   |    Yes     | Black |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50840409 | Yes |  Yes   | Grey  |    Valid    | Black |      Yes       |  Visible   |    Yes     | Grey  |          No           | Black |          No          |

s

shreyasm-dev

您可以在不使用 JavaScript 且仅使用 HTML 的情况下执行此操作您需要设置默认选择选项 disabled="" 和 selected="" 并选择标签 required="". 浏览器不允许用户在未选择选项的情况下提交表单。

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

J

Jesto .K.J

看到这个答案：

<select>
        <option style="display: none;" value="" selected>SelectType</option>
        <option value="1">Type 1</option>
        <option value="2">Type 2</option>
        <option value="3">Type 3</option>
        <option value="4">Type 4</option>
</select>

P

Peter Mortensen

这是我的贡献。 Haml + CoffeeScript + SCSS

哈姆

=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'); } else { return $(this).css('color', 'gray'); } }); $('select').change();选择选项{颜色：黑色； }

您可以添加更多 CSS (select option:first-child) 以使占位符在打开时保持灰色，但我不在乎。

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

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们