How to Make a Placeholder For a 'Select' Box

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

A non-CSS - no JavaScript/jQuery answer:

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

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>

A Placeholder for the `select` tag?

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


Re-selectable placeholder:

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

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>

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

Inspiration: - re-selectable placeholder - hidden placeholder

How do I make Placeholder for select box that has values in javascript?

you can do that: (?)

var currentRank = 
{ iron : { '1': 0, '2': 11, '3': 19 }
, bronze : { '1': 28, '2': 42, '3': 56 }
, silver : { '1': 69, '2': 85, '3': 102 }
, gold : { '1': 118, '2': 140, '3': 161 }
, plat : { '1': 182, '2': 211, '3': 240 }
, diamond : { '1': 276, '2': 311, '3': 351 }
, imortal : { '1': 406, '2': 499, '3': 591 }

const myForm = document.forms['my-form']
function setSelect( xSlct, arr )
xSlct.innerHTML = '' // clear all options
let ph = new Option(xSlct.dataset.placeholder , '', true, true )
xSlct.add( ph )
arr.forEach(el => xSlct.add(new Option( el , el )) )
ph.disabled = true

setSelect( myForm.rank1, Object.keys(currentRank))

setSelect( myForm.devision1, Object
<form action="xxx" name="my-form" >
<select name="rank1" data-placeholder="<< Rank >>"></select>
<select name="devision1" data-placeholder="<< Devision >>"></select>

Having a placeholder in a Select option

I think this is what you want .


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


try this jsfiddle.

How to Set placeholder to selectbox

This is not select box its a type head, If you can see there is an input box in DOM with slide. So you can add placeholder into input#slide.

You can try this code,

$('#slide').attr("placeholder", "One");

window.onload = function () {   $('#slide').editableSelect({ effects: 'slide' });   $('#html').editableSelect();
$('#onselect').editableSelect({ onSelect: function (element) { $('#afterSelect').html($(this).val()); } });}
$(document).ready(function(){ $('#slide').attr("placeholder", "One");}) {  padding-left:20px!important;  direction:rtl;  background-color:#FFF !important;  border:1px solid #ccc !important;  height:40px !important;cursor:pointer;  background-position:5% !important;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) left center no-repeat}
.es-list { position:absolute; padding:0; margin:0; border:1px solid #d1d1d1; display:none; z-index:1000; background:#fff; max-height:160px; overflow-y:auto;-moz-box-shadow:0 2px 3px #ccc;-webkit-box-shadow:0 2px 3px #ccc; box-shadow:0 2px 3px #ccc}
.es-list li{ display:block; height:45px; padding:0 !important; margin:0 !important; width:100%;}
.es-list li.selected { background:#2476bb;color:#fff;}
<select id="slide">    <option>one</option>    <option>two</option>    <option>three</option>  </select><script src=""></script>  <script src=""></script>

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.


month = null;


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

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>

How do I make a placeholder for a 'select' multiple box using bootstrap-select?

It's with the title attribute


<link rel="stylesheet" href="" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><link rel="stylesheet" href="">
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script><script src="" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script><script src=""></script>
<select class="selectpicker" title="Type" multiple> <option value="">Type 1</option> <option value="">Type 2</option> <option value="">Type 3</option> <option value="">Type 4</option></select>

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

A non-CSS - no JavaScript/jQuery answer: