How do I use HTML and CSS to get this type of styling in my drop down menu

Question

My current drop down looks like this

How do I use HTML and CSS in a local style to get this type of styling in the attached image in my drop-down menu

See my code below

select:active,
select:hover {
  outline-color: red;
  background-color: red;
}

<select id="select">
  <option value="">All Categories</option>
  <option value="Aston Martin">Aston Martin</option>
  <option value="Audi">Audi</option>
  <option value="Bentley">Bentley</option>
  <option value="Genesis">Genesis</option>
  <option value="Volvo">Volvo</option>
  <option value="VW">VW</option>
</select>

What you're seeing there simlpy isn't a drop down - it's most liekly a series of divs/spans etc. I would recommend you start developer tools (F12) and have a look. — Paul, Jan 09 '23 at 08:13
You should use the `edit` button to update your question, instead of creating a new one and deleting the old ([How do I use HTML and CSS to get this type of styling in my drop down menu](https://stackoverflow.com/questions/75054378/how-do-i-use-html-and-css-to-get-this-type-of-styling-in-my-drop-down-menu)), this is especially true if the old question already had comments and answers. — t.niese, Jan 09 '23 at 08:23

score 4 · Accepted Answer · answered Jan 09 '23 at 08:11

It is not possible to style HTML select, option tags, however, you can you JS libraries, like this one. They create the same result, but from other HTML tags, so you can style it as you want. Also check this question for some more context about your problem.

score 1 · Answer 2 · answered Jan 09 '23 at 08:29

1

As far as I know, standard styling of select , option tags is not enough. To do this, you need to use third-party tools, such as JS - libraries. There is a cool library - material UI. https://mui.com/

answered Jan 09 '23 at 08:29

score 1 · Answer 3 · answered Jan 09 '23 at 08:40

1

A custom dropdown is a common thing in web development. As Dave stated, the native HTML select doesn't allow styling of option tags. Here is a good resource for custom dropdowns using your own divs with css and jquery: https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

answered Jan 09 '23 at 08:40

Autex

307
2
12

Is it possible to get the same result with something else, without jQuery? – AndreyDerets Jan 09 '23 at 08:59
2

Yes, the jquery here is just used for class selection and adding/removing properties. Most things can be done with vanilla javascript; jquery just does here with less code – Autex Jan 09 '23 at 10:26

How do I use HTML and CSS to get this type of styling in my drop down menu

3 Answers3