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


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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color:#999;
}

1131
2018-04-27 13:39


起源




答案:


非CSS怎么样 - 没有javascript / jQuery的答案?

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


2335
2018-05-02 15:45



Firefox(10)不会将禁用选项显示为默认选项(占位符)。它默认显示下一个,在本例中为“Durr”。 - jarnoan
我通常添加禁用和选中。似乎也在FF工作。 - nilskp
<select> <option value="" disabled selected>Select your option</option> </select> - kolypto
这不是正确答案的原因是因为(我相信)提问者希望选择是灰色的,直到选择了另一个值。这个答案使下拉选项变为灰色;但 不 选择元素。 - Bill
select {option [disabled] {display:none; }} - Dimael Vertigo


只是偶然发现了这个问题,这里有什么适用于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' 风格只是使列表框看起来“很好”。

注意:使用空 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 元素具有类似的特征 display: none 在Safari,IE,(Project Spartan需要检查)所在的地方 option 在下拉列表中可见,但不可选择。

更新(2016年1月):

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

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

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

Chrome中的原生元素外观Mac:

Select box native Mac in Chrome

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

Altered select box Mac in Chrome


622
2017-12-09 08:22



@jaacob在我测试的浏览器中,'display:none'样式隐藏了列表中的“请选择”,这使它看起来更漂亮。 - William Isted
需要注意的是,无法重新选择已禁用的选项:如果select是必需的,则可以 - 但如果select是可选的则不行。 - Robert Mark Bram
Explorer11忽略了 display:none 样式。 - T30
感谢@MattW的工作 :invalid 在我做之前的方式。 - William Isted
您还可以添加一个规则来“重置” color 支持浏览器的选项如 这个小提琴。这将有助于加强这种贬值 option 是一个占位符。 (编辑:我看到MattW在他的回答中已经涵盖了这一点) - Shaggy


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


178
2018-04-22 18:30



令人惊讶的是 - 它是底部的答案(还没有upvotes),这是最简单的,实际上是完美的。谢谢!希望这个答案能够达到顶峰。 - Dan Nissenbaum
@DanNissenbaum我很晚才参加比赛,而且确实需要 required 如果您希望该字段是可选的,那么它是没有用的。 - MattW
除此之外, :required IE8及更低版本不支持选择器。该 :invalid IE9及更低版本不支持选择器。 quirksmode.org/css/selectors - Matt Wagner
没有必要选择的解决方案? - user3494047
@ user3494047没有这种方法 - required 条件是导致浏览器应用的原因 :invalid 选择占位符时的伪类。 [value=""] 不会作为替代品,因为用户交互更新的是价值 属性 但CSS语法指的是(不存在的) 属性。 - MattW


这样的事可能吗?

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/


92
2018-04-27 13:50



这正是我最近所做的。但我添加了一个键盘处理程序,以便在通过键盘选择选项时也会发生更改(使用箭头或字母快捷键) jsfiddle.net/Zmf6t/131 - Radu
这让我走上了正确的轨道...但是我做了值=“”(引号之间没有任何内容),这样当点击提交按钮时,它仍然无法验证第一个选项,并且会出现一个浏览器弹出窗口通知你选择一个选项...谢谢@Albireo - Craig Wayne
为什么要明确调用更改函数。 - Foreever
@Foreever因为我在select的更改事件处理程序中设置了CSS类,所以如果在构建控件时没有手动引发事件,则不应用样式(仅当用户手动更改值时才应用该样式)。 - Albireo


我刚刚在下面的选项中添加了隐藏属性,它对我来说很好。

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


35
2018-06-30 10:42



仅供记录,这对我不起作用(Win10上的Chrome)。 - Chris Rae
但你无法解开它。您最终选择了一个,但如果您改变主意,则无法重置。 - Thielicious
是啊!但无论如何,在表单中用户必须选择任何一个选项。如果它不是必填字段则删除隐藏属性。 - Ajithkumar S


该解决方案也适用于FireFox:
没有任何JS。

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>


22
2018-02-12 08:24





我遇到了同样的问题,在搜索时遇到了这个问题,在我找到好的解决方案之后,我想与你们分享,以防有人可以从中受益。 这里是: 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;
}

JS:

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

客户首先选择后不需要灰色,因此JS删除了类 place_holder。 我希望这可以帮助别人 :)

更新: 感谢@ user1096901,作为IE浏览器的解决方案,您可以添加 place_holder 再次选择第一个选项再次选择:)


19
2017-08-11 05:00



在某些浏览器中,他仍然可以选择display:none选项,因为它没有被隐藏。 - Srneczek
你是对的我在IE浏览器中面对这个 - rramiii
解决这个问题的方法是在选择第一个选项的情况下再次添加“place_holder”类:) - rramiii