Logo - Albert Walicki

How to add a placeholder for HTML <select> component?

To add a placeholder to a <select> element in HTML, you can use the <option> element as the placeholder and give it the disabled and selected attributes. Here is an example:

  <option disabled selected>Select an option</option>
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
  <option value="op3">Option 3</option>

This prevents the user from selecting this option from the dropdown menu and instead creates a select> element with the placeholder "Select an option." The placeholder will appear in the dropdown menu when the user clicks the select> element, but it won't be selectable. The placeholder will be changed to the selected option whenever the user chooses one of the other choices.

See more solutions!


How to create a tooltip in HTML and CSS?

A short tutorial on creating an HTML and CSS tooltip without a single line of javascript. All you need to know is data-atributes

Logo - Albert Walicki

Hello, I'm a frontend developer with over six years of experience, freelancer. I'm also a mentor for junior frontend developers. I wrote a book for Junior Frontend developers called Frontend Unicorn.

BlogGlassmorphismAurora UIShapes in CSSUnique css illustrations

Get in touch!

Have a question or need a project? Contact me!

© 2020-present Albert Walicki. All Rights Reserved