Screenshot of styled custom dropdown

Click for high-res image.

A customized, styled dropdown select made with HTML, CSS and JS.

Make a styled, custom dropdown

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.

View on CodePen