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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

您可以将第一个选项的颜色设置为灰色,将其显示设置为无,将选择的颜色设置成灰色,并向其添加一个将其颜色设置为黑色的输入事件侦听器。

选择>选项:不(:第一个类型){颜色:黑色;}<select style='color:gray'on输入='style.color=“black”'><option style='display:none'>选择一个选项</选项><选项>1.</选项><选项>2.</选项><选项>3.</选项></选择>

使用customElement API:

class placeholderSelect扩展了HTMLElement{已连接Callback(){this.innerHTML=`<select style='color:gray'on输入='style.color=“black”'><option style='display:none'>${this.getAttribute('data-placeholder')}</选项>${this.innerHTML}</select>`;Array.from(this.children[0].childress).forEach(函数(el,i){el.style.color=“黑色”;});}}customElements.define('占位符选择',占位符选择);<placeholder select data placeholder=“选择选项”><选项>1.</选项><选项>2.</选项><选项>3.</选项></占位符选择>

其他回答

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

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

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

我目前无法使用这些选项,因为对我来说(1)不需要,(2)需要返回默认可选选项。因此,如果您使用jQuery,这里有一个很严厉的选项:

var$selects=$('select');$selects.change(函数(){var option=$('选项:默认',this);if(option&&option.is(':selected')){$(this).css('color','#999');}其他{$(this).css('color','#555');}});$selects.each(函数){$(this).change();});期权{颜色:#555;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select name=“in op”><option default selected>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>

基于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></选择>

选择:焦点选项。文件夹{显示:无;}<选择><option selected=“selected”class=“holder”>请选择</option><option value=“1”>选项#1</option><option value=“2”>选项#2</option></选择>

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

表单选择:无效{颜色:灰色;}表单选择选项:第一个子项{颜色:灰色;}表单选择:无效选项:不(:第一个子项){颜色:黑色;}<表单><选择所需><option value=“”>选择行星</选项><option value=“earth”>地球</option>潘多拉</option></选择></form>