我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:
<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.</选项></占位符选择>