placeholder for select tag

Is it possible to have a placeholder on a select tag?

<select placeholder="select your beverage">
   
   <option>Tea</option>

   <option>coffee</option>

   <option>soda</option>

</select>

or may be a possible work around?

According to Mozilla Dev Network, placeholder is not a valid attribute on a <select> input.

Instead, add an option with an empty value and the selected attribute, as shown below. The empty value attribute is mandatory to prevent the default behaviour which is to use the contents of the <option> as the <option>'s value.

<select>
    <option value="" selected>select your beverage</option>
    <option value="tea">Tea</option>
    <option value="coffee">Coffee</option>
    <option value="soda">Soda</option>
</select>

In modern browsers, adding the required attribute to the <select> element will not allow the user to submit the form which the element is part of if the selected option has an empty value.

If you want to style the default option inside the list (which appears when clicking the element), there's a limited number of CSS properties that are well-supported. color and background-color are the 2 safest bets, other CSS properties are likely to be ignored.

In my option the best way (in HTML5) to mark the default option is using the custom data-* attributes.¹ Here's how to style the default option to be greyed out:

<select>
  <option value="" selected data-default>select your beverage</option>
  <option value="tea">Tea</option>
  <option value="coffee">Coffee</option>
  <option value="soda">Soda</option>
</select>

select option[data-default] {
  color: #888;
}

However, this will only style the item inside the drop-down list, not the value displayed on the input. If you want to style that with CSS, target your <select> element directly. In that case, you can only change the style of the currently selected element at any time.²

If you wanted to make it slightly harder for the user to select the default item, you could set the display: none; CSS rule on the <option>, but remember that this will not prevent users from selecting it (using e.g. arrow keys/typing), this just makes it harder for them to do so.

---

_{¹ This answer previously advised the use of a default attribute which is non-standard and has no meaning on its own.
² It's technically possible to style the select itself based on the selected value using JavaScript, but that's outside the scope of this question. This answer, however, covers this method.}

EDIT: This did/does work at the time I wrote it, but as Blexen pointed out, it's not in the spec.

Add an option like so:

<option default>Select Your Beverage</option>

The correct way:

<option selected="selected">Select Your Beverage</option>

<select>

    <option selected="selected" class="Country">Country Name</option>

    <option value="1">India</option>

    <option value="2">us</option>

</select>

     <select>
         <option value="" disabled selected hidden> placeholder</option>
         <option value="op1">op1</option>
         <option value="op2">op2</option>
         <option value="op3">op3</option>
         <option value="op4">op4</option>
     </select>

Yes it is possible

> You can do this using only HTML You need to set default select > option disabled="" and selected="" and select tag required="". > Browser doesn't allow user to submit the form without selecting an > option.

<form action="" method="POST">
	<select name="in-op" required="">
		<option disabled="" selected="">Select Option</option>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
    <input type="submit" value="Submit">
</form>

This my function for select box placeholder.

HTML

<select name="country" id="country">
  <option value="" disabled selected>Country</option>
  <option value="c1">England</option>
  <option value="c2">Russia</option>
  <option value="c3">USA</option>
</select>

jQuery

     jQuery(function($) {
      /*function for placeholder select*/
      function selectPlaceholder(selectID){
        var selected = $(selectID + ' option:selected');
        var val = selected.val();
        $(selectID + ' option' ).css('color', '#333');
        selected.css('color', '#999');
        if (val == "") {
          $(selectID).css('color', '#999');
        };
        $(selectID).change(function(){
          var val = $(selectID + ' option:selected' ).val();
          if (val == "") {
            $(selectID).css('color', '#999');
          }else{
            $(selectID).css('color', '#333');
          };
        });
      };
    
      selectPlaceholder('#country');
    
    });

No need to take any javscript or any method you can just do it with your html css

HTML

<select id="myAwesomeSelect">
    <option selected="selected" class="s">Country Name</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

Css

.s
{
    color:white;
        font-size:0px;
    display:none;
}

There is a Select2 plugin allowing to set a lot of cool stuff along with placeholder. It is a jQuery replacement for select boxes. Here is an official site https://select2.github.io/examples.html

The thing is - if you want to disable fancy search option, please use the following option set.

data-plugin-options='
{ 
    "placeholder": "Select status",
    "allowClear": true, 
    "minimumResultsForSearch": -1
}

Especially I like the allowClear option.

Thank you.

<select>
   <option disabled selected>select your beverage</option>
   <option >Tea</option>
   <option>coffee</option>
   <option>soda</option>
</select>

Try this

HTML

<select class="form-control"name="country">
<option class="servce_pro_disabled">Select Country</option>
<option class="servce_pro_disabled" value="Aruba" id="cl_country_option">Aruba</option>
</select>

CSS

.form-control option:first-child {
    display: none;
}