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

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

      Select your option      Durr    

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

Answer by Albireo for How do I make a placeholder for a 'select' box?

Something like this maybe?

HTML:

      Choose...      Something      Something else      Another choice    

CSS:

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

JavaScript:

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

Working example: http://jsfiddle.net/Zmf6t/

Answer by David for How do I make a placeholder for a 'select' box?

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

      Select your option      Durr  

Answer by William Isted for How do I make a placeholder for a 'select' box?

Just stumbled across this question, here's what works in FireFox & Chrome (at least)

  
                          Open when powered (most valves do this)          Closed when powered, auto-opens when power is cut        

The Disabled option stops the being selected with both mouse and keyboard, whereas just using 'display:none' allows the user to still select via the keyboard arrows. The 'display:none' style just makes the list box look 'nice'.

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

Update (July 2015):

This method is confirmed working in the following browsers:

• Google Chrome - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7 (Placeholder is visible in dropdown but is not selectable)
• Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)
• Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)

Update (October 2015):

Removed the style="display: none" in favour of HTML5 attribute hidden which has wide support. The hidden element has similar traits as display: none in Safari, IE, (Project Spartan needs checking) where the option is visible in dropdown but is not selectable.

Update (January 2016):

When the select element is required it allows use of the :invalid CSS pseudo-class which allows you to style the select element when in it's "placeholder" state. :invalid works here because of the empty value in the placeholder option.

Once a value has been set the :invalid pseudo-class will be dropped. You can optionally also use :valid if you so wish.

Most browsers support this pseudo-class. IE10+. This works best with custom styled select elements; In some cases i.e. ( Mac in Chrome / Safari) you'll need to change the default appearance of the select box so that certain styles display i.e. background-color, color. You can find some examples and more about compatibility at developer.mozilla.org.

Native element appearance Mac in Chrome:

Using altered border element Mac in Chrome:

Answer by Dani-Br for How do I make a placeholder for a 'select' box?

That solution works in FireFox also:
Without any JS.

option[default] {    display: none;  }

    Select Your Age    1    2    3    4  

Answer by user3520445 for How do I make a placeholder for a 'select' box?

I see signs of correct answers but to bring it all together this would be my solution.

select{    color: grey;  }    option {    color: black;  }    option[default] {     display: none;  }

      Select your option      Durr  

Answer by Jean-philippe Emond for How do I make a placeholder for a 'select' box?

Another possibility in JS:

 $('body').on('change','select', function (ev){      if($(this).find('option:selected').val() == ""){          $(this).css('color','#999');          $(this).children().css('color','black');      }      else {          $(this).css('color','black');          $(this).children().css('color','black');      }  });  

JSFiddle

Answer by rramiii for How do I make a placeholder for a 'select' box?

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:

      Sort by      two      something      4      5    

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

Answer by MattW for How do I make a placeholder for a 'select' box?

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 something...    One    Two  

Answer by dr.dimitru for How do I make a placeholder for a 'select' box?

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

          Label        

Answer by Ajithkumar for How do I make a placeholder for a 'select' box?

        Male    Female  

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72