How to I develop dropdown without breaking platform native behaviour?

RE:

You can 100% style the <select> element in HTML, what you can't (and shouldn't) style are the <option> elements inside. Some browsers will let you apply some styles to <option> elements, but since this isn't consistent, if you try to style them all you can be sure is that they will look broken in most browsers.

If you want to use a regular <select> and style it visually with CSS, there are a few things you need to think about:

  • how do I hide the default UI the browser provides
  • how can I set my own arrow or icon as a background-image to provide my own UI

Here's a code demo of a light and dark styled <select> box:

And here's a video tutorial I made about how to do this from scratch that walks you through the whole process: staticresource.com/styling-select.mp4

Reply to this…

Take me to the question