Code notes: Make a styled, custom dropdown
A customized, styled dropdown select made with HTML, CSS and JS.

Code notes: Make a styled, custom dropdown

Reading time: About 1 min.

Published on Sunday, February 16, 2020
Last edited on Tuesday, March 31, 2020

I was working on a recent project that required me to create a customized select dropdown. It had to clearly, neatly show two sets of data (jobs and locations), and look good in the process. Each item in the dropdown would link to a corresponding job listing on another page.

To do this, I styled a set of list items that contained the required information. Styled with CSS, and triggered using Javascript, the result was exactly what my client was hoping for.

You can see the source code, and the end result in the Codepen below.

If you found this useful, then please consider buying me a coffee to show your support.


Have an idea? Need a hand? Get in touch.