Select box in html: Make select box placeholder using CSS

It is hard to define a placeholder of the select box, but not impossible. By doing a few steps you can easily implement a select box placeholder.

But there are some problems to do this perfectly. I tried to solve those problems as much as possible, and also quoted essential instructions.

5 simple steps to make a select box placeholder

Step 1: Take a select box with multiple options Step 2: Chose one option as a placeholder Step 3: Make placeholder option disabled Step 4: Make placeholder option also selected  Step 5: Make placeholder option hidden

To make a placeholder for a select element, you can simply make a disabled option. When you make it selected, it will be shown as a placeholder. 

<select>
    <option value="" disabled selected>Choose your option</option>
    <option value="one">Option one</option>
	<option value="two">Option two</option>
</select>

You may notice disabled option is also shown even after selecting an option. You should hide this after user selection. 

<select required>
    <option value="" disabled selected hidden>Choose your option</option>
    <option value="one">Option one</option>
	<option value="two">Option two</option>
</select>

Important to note that a disabled option can't be re-selected once you click. If the selection is mandatory, this is not a problem. But when selecting is optional, it causes a problem to make this field blank. So you should do this only for the required fields. Now you should define a color when the option is not selected. Make sure your select element is required.

If you want to show different colors for unselected option, then follow the codes below:

select:invalid { color: gray; }

Once a value has been set, the :invalid pseudo-class will be dropped. Alternatively, you can also use :valid pseudo-class for selected options..