Select dropdown placeholder

Create Select dropdown placeholder
Create Select dropdown placeholder

Normally, we have placeholder for input and textarea field. The placeholder will be in gray colored text when you start typing it will turn into black but what about select box? We don’t have any placeholder attribute for select dropdown.

In this tutorial, I’ll show you how to create placeholder for select dropdown using jquery.
We need, select dropdown Select value should be in gray color and option should be in black.
First of all, create normal select box

//normal select box
//HTML
//CSS
select {
  color: #000;
  height:30px;
  width:200px;
  border:1px solid #ccc;
  font-size:14px;
  padding:0 10px;
}

Here, Select value and value 1, value 2.. everything will be in black color. We need to add default class to select when option value is empty using jquery

select.default {
  color: #ccc;
}
select option {
  color: #000;
}

When value is empty, add default class. when value is present, remove default class.
Also when page load, it should show gray colored text at first.
When select dropdown changes values it should check value and toggle default class.

/* trigger myFunction() when select changes */
$(document).on('change','select',myFunction());
/* calling myFunction() when page loads */
$(document).ready(myFunction);
function myFunction(){
var el = $('select');
/* toggle class when value is empty */
el.toggleClass('default', !el.val());
}

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *