Styling Dark Select Dropdown With Dropkick.js


This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.

This post is part of a series called Bringing Premium Pixels to Life.
Tagtastic Tag Cloud with CSS Transformations

HTML select elements with their option tags cannot be completely customized using CSS, but what if we want to style a dropdown just as easily as <div>, <a>, <ul>, and <li> elements can be styled? Today, we'll style the Premium Pixels Dark Select Dropdown using DropKick.js to help us do just that.

View Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Here is a basic outline of what's covered in this screencast:

Step 1: Base HTML and CSS

First, we will start off with our base HTML and CSS. The HTML will consist of a simple select tag and options in respective option tags. To start off with a clean slate, we will be using normalize.css. Nothing fancy here, we just want to start everything off - stay tuned for the fun stuff!

Step 2: Setting Up DropKick.js

DropKick.js is a great tool to treat select and option tags just like other tags that are a lot easier to style in CSS (e.g. unordered lists styled as navigation bar). Converting the HTML structure into a series of div’s,a’s, ul’s and li’s, styling dropdowns is as simple as customizing a theme template (which DropKick.js provides).

Implementing DropKick.js is as straight forward as executing a line of jQuery. We will start off downloading DropKick.js and altering our HTML to fit the script’s requirements (adding a name and class attribute to the select element) as well as extracting the CSS for the dropdown theme.

Step 3: Implementing DropKick.js

Using DropKick.js’s default template, we will be adding the necessary jQuery to bring the drop down to life. DropKick.js has many other features including callback events, but we will be focusing on the theme customization during this tutorial.

Step 4: Customizing a DropKick.js Theme

DropKick.js makes it very easy to make a custom theme for select dropdowns and we'll be using Premium Pixels' great dark design for this tutorial. In order to duplicate our design, we will be adding a bit of code to the javascript file.

Step 5: Scaling With Font Size

Lets face it - nothing is worse than struggling to select something extremely small using a mobile touch device (Ed: I can think of a few things..) The fix? Using font size (em’s) to scale the dropdown. Instead of using images for the dropdown arrows, we will be using a webfont (Font Awesome), which allows for much greater flexibility.


Styling form elements can be a pain, but using DropKick.js combined with a great design, it only takes a couple of minutes to implement and customize a great looking select dropdown.