custom select placeholder

CSS

7/30/2022, 2:41:07 PM

by Leo Voon

You would want something like this..

and when it is opened,

the placeholder “Choose here” is not in the option.

How to achieve ? Here is the code

<html>
<select required>
  <option value="" disabled selected hidden>Choose Bangsa...</option>
  <option value="Iban">Iban</option>
  <option value="Malay">Malay</option>
  <option value="Chinese">Cina</option>
  <option value="Indian">India</option>
  <option value="Lain-lain">Lain-lain</option>
</select>
</html>

<style>
select:invalid {
  color: gray;
} // customize as it is!
</style>