如何为“选择”框创建占位符？ [英] How do I make a placeholder for a 'select' box?

问题描述

我正在使用占位符进行文本输入，工作正常。但我也想为我的选择框使用一个占位符。 Ofcourse我可以使用这个代码：

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. Ofcourse I can just use this code:

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

但是选择您的选项是黑色的，而不是lightgrey。所以我的解决方案可能是基于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;
}

推荐答案

没有javascript / jQuery答案？

How about a non CSS - no javascript/jQuery answer?

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

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