facebook icon twitter icon angle down linkedin icon youtube icon
Home > Blog > select-box-placeholder

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. 

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

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>

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.. 

Tarikul islam

About Torikul islam

Torikul islam is a professional web developer and affiliate marketer. Join Torikul to learn how to start a website and operate it well. He started his Web Developement career from Bangladesh Association of Software and Information (BASIS) in 2015. Later he continiued his journey to expanding knowledge and sharing it with others.

Write a Comment

No comment yet