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:.

But the 'Select your option' is in black instead of lightgrey. So my solution could possibly be CSS-based. But it has already been answered, cheers.

And using this results in the selected value always being grey even after selecting a real option:. Using an empty value attribute on the "placeholder" option allows validation required attribute to work around having the "placeholder", so if the option isn't changed but is required; the browser should prompt the user to choose an option from the list.

The hidden element has similar traits as display: When the select element is required it allows use of the: Once a value has been set the: You can optionally also use: Most browsers support this pseudo-class.

This works best with custom styled select elements; In some cases i. You can find some examples and more about compatibility at developer. 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. I hope this helps someone: Browser doesn't allow user to submit the form without selecting an option. I wrap all of my inputs in AngularJs and so can take advantage of the fact that my select is wrapped in a containing element.

Note that doing these 2 things yourself is not a big deal if you are not using Angular. So now it's a CSS only approach where content is added and absolutely positioned relative to the container after the containing element: It gets its text from the placeholder attribute that I defined where I used the directive attr placeholder.

Dropdown Lists - Complete HTML5 tutorial

Another key factor is pointer-events: Otherwise it won't drop down if the user clicks the text. I couldn't get any of these to work currently, because for me it is 1 not required and 2 need the option to return to default selectable.

HTML5

So here's a heavy handed option if you are using jquery:. In respect to all solutions above, but this one seems to be most valid due to HTML specs: 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.

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site the association bonus does not count. Would you like to answer one of these unanswered questions instead? Stack Overflow Questions Developer Jobs Documentation beta Tags Users.

Sign up or log in to customize your list.

HTML select tag

Tour Start here for a quick overview of the site Help Center Detailed answers to any questions you might have Meta Discuss the workings and policies of this site About Us Learn more about Stack Overflow the company Business Learn more about hiring developers or posting ads with us.

Log In Sign Up. Join the Stack Overflow Community. Stack Overflow is a community of 7. Join them; it only takes a minute: How do I make a placeholder for a 'select' box? Ofcourse I can just use this code: This only makes the option grey in the dropdown so after clicking the arrow: And using this results in the selected value always being grey even after selecting a real option: William Perron 3 Thomas 4, 6 16 Andreas Grapentin 2, 3 19 David 22k 3 11 It shows the next one by default, in this case "Durr".

I usually add both disabled and selected. Seems to work in FF too. The reason this isn't the correct answer is because I believe the asker wants the select to be gray until another value has been selected. This answer makes the option gray in the drop down; but not the select element. William Isted 5, 2 17 It works in Chrome 16 too.

Important to note that a disabled option can't be re-selected: Explorer11 ignores the display: Why not add the attribute hidden to the option element?

For a required field, there is a pure-CSS solution in modern browsers: MattW 2, 1 6 Hopefully this answer will rise to the top. DanNissenbaum I was very late to the game, plus it does need the required to work so it's no use if you want the field to be optional.

Interesting question DavidAddoteye, I don't have time to play right now to see exactly how it's failing. CanIUse seems to imply that iOS Safari and Opera Mini have pseudo-class support for required, which should be enough.

As an aside, the: Something like this maybe? Albireo 7, 8 50 Why did you called the change function explicitly.

Foreever because I set the CSS class in the select's change event handler, so if you don't manually raise the event when the control is built the style is not applied it will be applied only when the user manually changes the value. I just added hidden attribute in option like below, It is working fine for me. Ajithkumar S 2 Just for the record, this doesn't work for me Chrome on Win That solution works in FireFox also: Dani-Br 2 11 I see signs of correct answers but to bring it all together this would be my solution.

Eric G 1, 2 16 Will Wang 3 5. Another possibility in JS: Jean-philippe Emond 1 4 Thusitha 4 I wanted the SELECT to be grey until selected so for this piece of HTML: So here's a heavy handed option if you are using jquery: Stack Overflow works best with JavaScript enabled. Firefox 10 doesn't show a disabled option as the default selection placeholder.

This method is confirmed working in the following browsers: Google Chrome - v. Native element appearance Mac in Chrome: Using altered border element Mac in Chrome: Amazing - it was the answer at the bottom with no upvotes yet that was the simplest, and actually works perfectly. In some browsers he can still select the display: MathOverflow Mathematics Cross Validated stats Theoretical Computer Science Physics Chemistry Biology Computer Science Philosophy more 3.

Meta Stack Exchange Stack Apps Area 51 Stack Overflow Talent.