Placeholder for Select Tag

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

A non-CSS - no JavaScript/jQuery answer:

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

placeholder for select tag

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>

How to Set Placeholder on Select Tag in Angular 8?

Set initial value of month = null in the component.ts and add [(ngModel)]="month" in the select tag of component.html.

component.ts

month = null;

component.html

<form  #filter="ngForm" (ngSubmit)="filterta(filter)" style="display: flex;">
       <select name="month" [(ngModel)]="month" #month required>
                <option [ngValue]="null" [disabled]="true" >All</option>
                <option value="1">January</option>
       </select>
</form>

A Placeholder for the `select` tag?

Here's two types of placeholder, re-selectable and hidden:

Demo: http://jsfiddle.net/lachlan/FuNmc/

Re-selectable placeholder:

<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

Hidden placeholder:

<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

CSS to change the colour of the first item:

select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }

And a little jQuery to toggle the font-color after selection:

// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
    $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');

Inspiration:

https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder

https://stackoverflow.com/a/8442831/1196148 - hidden placeholder

Changing the color of placeholder text of a select element

You can use ::placeholder pseudo in CSS, like this example:

::placeholder { color: #fff; }

If you want a cross-browser solution, you can use prefixes:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

The ::placeholder selector only selects the placeholder text inside your input, besides that, you can style the input itself when it is showing the placeholder using :placeholder-show.

Also, be aware that Firefox might show placeholder text lighter than it is supposed to display. to fix the issue you can use:

::-moz-placeholder {
  opacity: 1;
}

How to make placeholder for the select option but it has loop value?

Understanding your requirement, you need to have a placeholder in your select. If you use innerHTML, it will wipe out the whole.

You can use insertAdjacentHTML, like

document.getElementById("idBulanBerlaku").insertAdjacentHTML("beforeend", options);

or just below if you wish to keep using innerHTML

document.getElementById("idBulanBerlaku").innerHTML += options;

var start = 2010;var end = 2030;var options = "";for (var year = start; year <= end; year++) {  options += "<option>" + year + "</option>";}document.getElementById("idBulanBerlaku").insertAdjacentHTML("beforeend", options);

<div class="form-group">  <div class="col-sm-12">    <select class="form-control" id="idBulanBerlaku">      <option value="" disabled selected hidden>Please Choose...</option>    </select>  </div></div>

---

Related Topics