Custom Drop-Down List Styling

Learn to create some custom drop-down lists

This time, Hugo Giraudel is going to talk (and do stuff!) about something a bit more practical than button switches: drop-down lists. The point of this tutorial is to show how to create nice drop-downs without any image but with CSS only. He will add some line of jQuery to make them work.

 

First question: what do you need to create a drop-down? In general, Hugo Giraudel will use a division with a span and an unordered list for the drop-down list . Let’s dig into the CSS which is the main focus in this tutorial. Starting with the wrapper there are few things here. First Hugo Giraudel sets a width to his dropdown and some paddings/margins. Next, he gave it some styles. And finally, he set some font settings, which will cascade to the dropdown itself. Last he finishes with the “label” by adding the little arrow on the right with a pseudo-element.

Comments

Be the first to write a comment

You must me logged in to write a comment.