Can you customize the individual "option" tags in a "select" tag of a dropdown list?

Can you add “id” or “class” attributes to all the individual “option” tags in a “select” tag of a dropdown list in order to use CSS to customize them?

https://www.codecademy.com/paths/web-development/tracks/learn-html-web-dev-path/modules/learn-html-forms/lessons/html-forms/exercises/dropdown-list

Hey there @noblekc :grinning:

I could certainly give you the answer to this question, but I would like to say that part of learning to program is often learning to solve problems on your own, and this is an relatively easy one to figure out.

On that note I would recommend you test this idea your self either on your own computer or an online IDE like repl.it.

If you can’t come up with a way to test it, though I think you can, here is an idea:

An Idea

HTML

<select id="list" name="list">
  <option id="one" value="one">one</option>
  <option id="two" value="two">two</option>
  <option id="three" value="three">three</option>
</select>

CSS Styling

#list {
  color: #000000;
}

#one {
  color: #FF0000;
}

#two {
  color: #00FF00;
}

#three {
  color: #0000FF;
}

Okay!

Thanks for challenging me to give it a try on my own and giving me an idea too.

1 Like