如何为』select』框创建占位符？

问题描述

我正在使用占位符的文本输入，这是正常工作正常。但是我也想为我的选择框使用占位符。当然我可以用这个代码：

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

但是，「选择你的选项」是黑色而不是 lightgrey 。所以我的解决方案可能是 CSS-based 。 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’ 。

注意：在”placeholder” 选项上使用一个空的 value 属性允许验证 (必需属性) 使用”placeholder”，因此如果该选项不更改但是必需; 浏览器应该提示用户从列表中选择一个选项。

更新 (2015 年 7 月)：

该方法在以下浏览器中得到确认：

Google Chrome – 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 中的 display: none 相似的特征，IE(Project Spartan 需要检查)，option 在下拉菜单中可见，但不可选。

更新 (2016 年 1 月)：

当 select 元素是 required 时，它允许使用:invalid CSS pseudo-class，它允许您在「占位符」状态下对 select 元素进行样式化。由于占位符 option 中的空值，:invalid 在此处工作。

一旦设置了一个值，:invalid pseudo-class 将被丢弃。如果您愿意，也可以选择使用:valid 。

大多数浏览器支持此 pseudo-class 。 IE10 +。这最适合自定义样式的 select 元素; 在某些情况下 (即 Chrome /Safari 中的 Mac)，您需要更改 select 框的默认外观，以便某些样式显示为 background-color，color 。您可以在 developer.mozilla.org 找到一些关于兼容性的例子。

原生元素外观 Mac 中的 Chrome：

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

第三种解决方案

对于必需的字段，现代浏览器中有一个 pure-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/

第五种方案

我刚刚在下面的选项中添加了隐藏的属性，这对我来说是正常的。



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

第六种方案

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

第七种方案

我有同样的问题，而搜索过程中遇到这个问题，在我找到了很好的解决方案后，我想和大家分享一下，以防一些人能从中受益。这里是：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 类，以防再次选择第一个选项:)

第八种方案

我看到正确的答案的迹象，但把它全部在一起这将是我的解决方案。



select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>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>

第十种方案

JS 中的另一种可能性：

 $('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

参考文献

How do I make a placeholder for a ‘select’ box?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何为』select』框创建占位符？