How do I make a placeholder for a 'select' box?

placeholder html
placeholder text example
placeholder css
placeholder example
select placeholder color
select placeholder bootstrap
textarea placeholder
select placeholder angular

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:

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

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;

A non-CSS - no JavaScript/jQuery answer:

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

Don't Use The Placeholder Attribute, Make sure to keep your content semantically described—your neighbors will thank you! Interoperability. Interoperability is the practice of making  There is no placeholder attribute in ‘select’ tag but it can make the placeholder for a ‘select’ box. There are many ways to create the placeholder for a ‘select’ box.

I just stumbled across this question, and here's what works in Firefox and Chrome (at least):

select:invalid { color: gray; }
<select required>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>

How to make a placeholder for a 'select' box?, There is no placeholder attribute in 'select' tag but it can make the placeholder for a 'select' box. There are many ways to create the placeholder for a 'select' box  If you want to set a hint for text area or input field, then use the HTML placeholder attribute. The hint is the expected value, which gets displayed before the user enters a value, for example, name, details, etc. Example. You can try to run the following code to learn how to use placeholder attribute in HTML.

For a required field, there is a pure-CSS solution in modern browsers:

select:required:invalid {
  color: gray;
option[value=""][disabled] {
  display: none;
option {
  color: black;
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>

::placeholder, A telephone input field with a placeholder text: The placeholder attribute specifies a short hint that describes the expected value of an input Get Certified »  Select Placeholder. Complete the fields of the dialog. >>Quick Reference. Click OK. Alternative methods to creating a placeholder. x. Right click in the Document Manager to open the shortcut menu and select | New | Document Link, Word Document, or Excel Document. Notes.

Something like this:


<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>


#choice option { color: black; }
.empty { color: gray; }


$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")


Working example:

HTML input placeholder Attribute, How To Use Our Placeholders. Just specify the image size after our URL (https://​ and you'll get a placeholder image. So the image URL  Here's how: Click the icon in the middle of the slide. Use the Insert Picture dialog to locate and select the picture, and then click Insert. PowerPoint, by default, will make

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

  <option hidden>Sex</option>
</select> – The Free Image Placeholder , To create your own custom placeholder page, you need access to the following things: A text, HTML, or WYSIWYG code editor to build the placeholder page such  When a four-headed arrow appears over the borders, click and drag the placeholder to a new location. To resize a placeholder: Click inside the placeholder. The border changes to sizing handles. Move the pointer over the sizing handles and a + appears. Click and drag the placeholder to the size you want.

How to Design a Placeholder Page for Your Website, When you create a Placeholder, you select the content to display, choose a query for the Placeholder, and then create the Placeholder itself. This chapter  That is all handled by PlaceholderAPI. If you are using player.getStatistic(Statistic.<some stat>) you can just use the built in placeholder for that stat is using PlaceholderAPI -%statistic_<stat here>%. If you are attempting to store your own stats in your plugin, just do without PlaceholderAPI or register a placeholder in the plugin.

Creating a Placeholder, This is a tutorial that shows you how to create a very basic html webpage, to use if you don't Duration: 4:13 Posted: Apr 12, 2017 Definition and Usage. The placeholder attribute specifies a short hint that describes the expected value of a text area. The short hint is displayed in the text area before the user enters a value.

How to Make a Placeholder Website (Basic html), In this video i have showed u how to create a placeholder version of images. Related link of that Duration: 3:49 Posted: Mar 7, 2016 Compare Prices on Place Holder in Kitchen & Dining.

  • Just in case someone reads this - I posted a more common solution for modern browsers with browser's built in validation. Welcome to year 2020 ;)
  • Firefox (10) doesn't show a disabled option as the default selection (placeholder). It shows the next one by default, in this case "Durr".
  • I usually add both disabled and selected. Seems to work in FF too.
  • <select> <option value="" disabled selected>Select your option</option> </select>
  • 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.
  • select { option[disabled] { display: none; } }
  • @jaacob In browsers I've tested, the 'display:none' style hides the "Please choose" from the list which just makes it look nicer.
  • Important to note that a disabled option can't be re-selected: if the select is mandatory, this is ok - but not if the select is optional.
  • Explorer11 ignores the display:none style.
  • Kudos to @MattW for working out :invalid way before I did.
  • You could also add a rule to "reset" the color of the options in supporting browsers as in this fiddle. This would help to reinforce that the disbled option is a placeholder. (Edit: I see MattW has already covered this in his answer)
  • Amazing - it was the answer at the bottom (with no upvotes yet) that was the simplest, and actually works perfectly. Thanks! Hopefully this answer will rise to the top.