How do I make a placeholder for a 'select'

2018-12-31 03:08发布

站内问答 / HTML/CSS
592 23 6

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>

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;
}

Edit: 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;
}

23条回答
弹指情弦暗扣
2楼-- · 2018-12-31 03:54

I had the same problem and while searching came across this question, and after I found good solution for me I would like to share it with you guys in case some one can benefit from it. here it is: 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;
}

JS:

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

After customer makes first select no need for gray color so JS removes the class place_holder. I hope this helps someone :)

Update: Thanks to @user1096901, as a work around for IE browser, you can add place_holder class again in case first option is selected again :)

查看更多
0人赞 添加讨论(0) 举报
步步皆殇っ
3楼-- · 2018-12-31 03:54

In respect to all solutions above, but this one seems to be most valid due to HTML specs:

<select>
  <optgroup label="Your placeholder">
    <option value="value">Label</option>
  </optgroup>
</select>

UPDATE: Pardon me for this incorrect answer, this is definitely not a placeholder solution for the select element, but a title for grouped options under opened select element list.

查看更多
0人赞 添加讨论(0) 举报
若你有天会懂
4楼-- · 2018-12-31 03:55

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

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

查看更多
0人赞 添加讨论(0) 举报
柔情千种
5楼-- · 2018-12-31 03:55

There's no need for any JS or CSS, just 3 attributes:

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

it doesn't show the option at all, just sets the option's value as the default.

However, if you just don't like a placeholder that's the same color as the rest, you can fix it inline like this:

<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>

<body onload="document.getElementById('mySelect').selectedIndex = 0">

<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">
  <option value="" hidden>Select your beverage</option> <!-- placeholder -->
  <option value="water" style="color:black" >Water</option>
  <option value="milk" style="color:black" >Milk</option>
  <option value="soda" style="color:black" >Soda</option>
</select>

</body>
</html>

Obviously, you can separated the functions and at least the select's CSS into separate files.

Note: the onload function corrects a refresh bug.

查看更多
0人赞 添加讨论(0) 举报
君临天下
6楼-- · 2018-12-31 03:56

I wanted the SELECT to be grey until selected so for this piece of HTML:

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

I've added these CSS definitions:

select { color: grey; }
select:valid { color: black; }

It works as expected in Chrome / Safari, maybe also in other browsers but I haven't checked.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)