Select box in html: Make select box placeholder using CSS
Last Updated on Dec 5, 2022 - Written By Torikul Islam
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..