Page Banner

How to set placeholder like text on select tags

Following all new slim and minimalist design guidelines for client end GUI applications on the web, we often drop the use of labels in favor of placeholders in html input fields. But that leads to a problem while using select tags in html since select tags have no placeholders. To overcome this, we just have to add a single line as an option to our select tag:

     <option value="" disabled selected hidden class="text-muted">
           Placeholder text goes here

This works either if you provide a static options list as in plain html or even when populating the select list with a dynamic list of options fetched asynchronously.