如何为“选择"框制作占位符? [英] How do I make a placeholder for a 'select' box?

问题描述

我将占位符用于文本输入，效果很好.但我也想为我的选择框使用占位符.当然我可以只使用这个代码:

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code:

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

但是选择您的选项"是黑色而不是浅灰色.所以我的解决方案可能是基于 CSS 的.jQuery 也不错.

But the 'Select your option' is in black instead of lightgrey. So my solution could possibly be CSS-based. jQuery is fine too.

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

This only makes the option grey in the dropdown (so after clicking the arrow):

option:first {
    color: #999;
}

问题是:人们如何在选择框中创建占位符?但是已经有人回答了，干杯.

The question is: How do people create placeholders in selectboxes? But it has already been answered, cheers.

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

And using this results in the selected value always being grey (even after selecting a real option):

select {
    color: #999;
}

推荐答案

我刚刚在 option 中添加了一个隐藏属性，如下所示.对我来说效果很好.

I just added a hidden attribute in an option like below. It is working fine for me.

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

这篇关于如何为“选择"框制作占位符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！