Fershad Irani

Digital Sustainability Consultant
This website is grid-aware, some functionality has changed based on your local energy grid. Find out more.
Post

Make a styled, custom dropdown

Published:

Table of Contents

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 Styled dropdown with smooth expanded effect by @fishintaiwan on CodePen