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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

基于Albireo的响应,该版本不使用jQuery,CSS的特异性更好。

const triggerEvent=(el,eventName)=>{let event=document.createEvent('HTMLEvents')event.initEvent(eventName,true,false)el.dispatchEvent(事件)}let select=document.querySelector('.placeholder select')select.addEventListener('change',(e)=>{e.target.classList[e.target.value==0?'add':'remove']('empty')})triggerEvent(选择,“更改”)占位符选择选项{颜色:#000000;}占位符选择选项:第一个子项{颜色:#444444;字体样式:斜体;字号:粗体;}.占位符-选择为空{颜色:#7F7F7F;}<select class=“placeholder select”><option value=“0”selected=“selected”>选择</选项><option value=“1”>有些东西</option><option value=“2”>其他内容</option><option value=“3”>另一个选项</option></选择>

其他回答

用户不应在选择选项中看到占位符。我建议为占位符选项使用隐藏属性,并且您不需要为该选项选择所选属性。你可以把它放在第一位。

select:不(:有效){颜色:#999;}<选择所需><option value=“”hidden>选择您的选项</option><option value=“0”>第一个选项</option><option value=“1”>第二个选项</option></选择>

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

这里是:

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

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

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

浏览器内置的验证函数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
}

基于Albireo的响应,该版本不使用jQuery,CSS的特异性更好。

const triggerEvent=(el,eventName)=>{let event=document.createEvent('HTMLEvents')event.initEvent(eventName,true,false)el.dispatchEvent(事件)}let select=document.querySelector('.placeholder select')select.addEventListener('change',(e)=>{e.target.classList[e.target.value==0?'add':'remove']('empty')})triggerEvent(选择,“更改”)占位符选择选项{颜色:#000000;}占位符选择选项:第一个子项{颜色:#444444;字体样式:斜体;字号:粗体;}.占位符-选择为空{颜色:#7F7F7F;}<select class=“placeholder select”><option value=“0”selected=“selected”>选择</选项><option value=“1”>有些东西</option><option value=“2”>其他内容</option><option value=“3”>另一个选项</option></选择>

如果您正在阅读并使用React,请使用defaultValue。

<option defaultValue>Select a country here</option>