How do I make a placeholder for a 'select' box?

html

responsive-design

aria-labels

javascript

byAnton Shumikhin·Feb 12, 2025

To quickly set up a placeholder in a select box, consider the following recipe. Whisk up an option with a sprinkle of disabled, a pinch of selected, and a dusting of hidden. This prevents your users from re-selecting the placeholder after they've picked an option. Finally, don your chef's hat and style the dish using select:required:invalid to make the placeholder stand out in a delicious grey. Savor the result:

<select required>
  <option value="" disabled selected hidden>Select...</option>
</select>

/* Our special seasoning for the placeholder */
select:required:invalid {
  color: grey;
}

This recipe yields a placeholder that's as user-friendly as Grandma's apple pie, providing a clear call to action and maintaining a tidy UI post-selection.

Showcasing the placeholder

Make your placeholder pop like champagne at New Year's by using separate styles before and after selection. Some selector magic can solder this experience together:

/* Our placeholder gets the red carpet treatment */
select:required:invalid {
  color: grey;
} 

/* For our choices, a classic black-tie event */
select:not(:required:invalid){ 
  color: black; 
}

Not just a pretty face: functional styling and behavior

In the select world, being pretty is just the start. You can make your elements work harder and smarter, too.

Speak up for accessibility

Using ARIA labels, your select elements can express their intentions loud and clear:

<select required aria-label="Select an option">
  <option value="" disabled selected hidden>Select...</option>
  <!-- other options -->
</select>

JavaScript: get the party started

Sprinkle some JavaScript or jQuery magic for a smarter, more responsive UI:

Class toggling based on state changes? Yes, please!
Auto-triggered event updates on option changes? Oh, wait up, my fancy hat fell off!

Vanilla JavaScript example:

document.querySelector('select').addEventListener('change', function() {
  this.classList.toggle('finally', this.value !== ""); // "Finally, they made a choice!"
});

Don't leave older browsers in the dust

We love all browsers, new and old. Be considerate and plan fallbacks or polyfills for your older browser friends.

Mastering `select` box placeholders: essential concepts and caveats

Let's equip you with a handful of critical insights and neat tricks to crank your select boxes up to eleven.

Placeholder non-selectability post-choice

Nobody wants to pick something they've been told to ignore. So, make your placeholder option unselectable post-choice:

<!-- The magic show is over once you've made a choice ✨ -->
<option value="" disabled selected hidden>Select...</option>

Visualizing "requiredness"

Your placeholders can play a bigger role in guiding users. For instance, they can visually signal that a response is required:

select:required:invalid::after {
  content: ' *';
  color: red;
}

To maintain a lean dropdown list, free from distractions, conceal the placeholder option after a choice has been made:

select option[value=""][hidden] {
  display: none; // "Now you see me, now you don't! 🎩"
}

explain-codes / Html / How do I make a placeholder for a 'select' box?

Linked

Placeholder for Select Tag



Set the select option as blank as default in HTML select element



How do I make an HTML text box show a hint when empty?



Bootstrap select dropdown list placeholder



Change Select List Option background color on hover



Css :selected pseudo class similar to :checked, but for `` elements



:not(:empty) CSS selector is not working?



Showcasing the placeholder Not just a pretty face: functional styling and behavior Mastering box placeholders: essential concepts and caveats