我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

您需要表单验证,现代浏览器从头开始就提供了这一功能。

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

浏览器内置的验证函数checkValidatity()。

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>

Java脚本

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

其他回答

我刚刚偶然发现了这个问题,下面是Firefox和Chrome的工作原理(至少):

<style>选择:无效{颜色:灰色;}</style><表单><选择所需><option value=“”禁用所选隐藏>请选择</选项><option value=“0”>通电时打开(大多数阀门都这样做)</option><option value=“1”>通电时关闭,断电时自动打开</option></选择></form>

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

注意:在“占位符”选项上使用空值属性允许验证(必需属性)绕过“占位符”,因此如果选项未更改,但是必需的,则浏览器应提示用户从列表中选择一个选项。

更新(2015年7月):

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

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

更新(2015年10月):

我删除了style=“display:none”,改为支持广泛的HTML5属性hidden。隐藏元素具有与显示类似的特性:在Safari、Internet Explorer和(Project Spartan需要检查)中都没有,在下拉列表中该选项可见,但不可选择。

更新(2016年1月):

当需要select元素时,它允许使用:invalid CSS伪类,该类允许您在select元素处于“占位符”状态时设置其样式。:由于占位符选项中的值为空,因此此处无效。

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

大多数浏览器都支持这个伪类。Internet Explorer 10及更高版本。这对于自定义样式的选择元素最有效;在某些情况下,例如(Mac在Chrome/Safari中),您需要更改选择框的默认外观,以便显示某些样式,例如背景色和颜色。您可以在developer.mozilla.org上找到一些关于兼容性的示例和更多信息。

Chrome中的原生元素外观Mac:

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

您可以在不使用JavaScript和仅使用HTML的情况下执行此操作。您需要将默认的select选项设置为disabled=“”和selected=“”,并选择所需的标记=“”。浏览器不允许用户在未选择选项的情况下提交表单。

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

在这里,我修改了大卫的答案(接受的答案)。在他的回答中,他将禁用和选定属性放在选项标签上,但当我们也放置隐藏标签时,它看起来会更好。

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

<选择><option value=“”disabled selected hidden>选择您的选项</option><option value=“hurr”>Durr</option></选择>

这是我的贡献。火腿+咖啡脚本+SCSS

Haml

=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');}其他{return$(this).css('color','gray');}});$('select').change();选择选项{颜色:黑色;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“form control”name=“user[country_id]”id=“user_country_id”><option value=“”>国家</option><option value=“231”>美国</option><option value=“1”>安道尔</option>阿富汗</option><option value=“248”>津巴布韦</option></select>

您可以添加更多的CSS(选择选项:firstchild),以在占位符打开时保持其灰色,但我并不在乎这一点。

好的,在我的案例中,有一个很有用,它的特点(与公认的答案相反):

如果是占位符,则为灰色不需要选择能够变回灰色(值=“”)没有外部库(jquery等)

如果值不是“”,则需要一个小JS函数将其更改为灰色/黑色。注释中解释了JS。。没有注释,只有几行代码。通过将其放在函数中,它将适用于该类的所有复选框。。

函数checkSelectboxes(){//选中所有复选框,这里我根据类名选择这样做let selectboxes=document.querySelectorAll('.form select');//循环浏览所有复选框(这次只有一个)selectboxes.forEach(sb=>{//将eventlistener添加到每个复选框sb.addEventListener('change',函数(e){//如果此复选框的值不是“”,则添加类,否则:删除它。e.target.value=="" ? e.target.classList.add('changed'):e.target.cclassList.remove('changed');})})}//调用函数checkSelectboxes();.表单选择{颜色:#ccc;}.form-select已更改{颜色:#000}.form选择选项{颜色:#000;}.form select选项:第一个类型{颜色:#ccc;}<!-- 给第一个选项一个空值,并将其设置为selected--><select type=“text”class=“form select”><option value=“”selected>--我的占位符--</option><option>1 lorem--</option><option>2ipsum--</option><option>3多尔--</option></选择>