Select dropdown placeholder

Posted by in CSS, HTML, JQuery

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

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

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.

Share your comments