Site Elements

Styling Dark Select Dropdown With Dropkick.js


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!

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

	<meta charset="utf-8">
	<title>Dark Select</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Don't Forget the Viewport Metatag -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS -->
	<link rel="stylesheet" href="css/normalize.css">

	<!--[if lt IE 9]>
		<script src=""></script>

		<select name="dropdown" class="dropdown">
			<option>Your profile</option>
			<option>Your account</option>
			<option>Sign Out</option>

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.

    // HTML template for the dropdowns
    dropdownTemplate = [
      '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
        '<a class="dk_toggle">',
          '<span class="dk_label">{{ label }}</span>',
        '<div class="dk_options">',
          '<ul class="dk_options_inner">',

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.

Related Posts
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Web Design
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Authentication With Laravel 4Laravel 4 auth retina preview
    Authentication is required for virtually any type of web application. In this tutorial, I'd like to show you how you can go about creating a small authentication application using Laravel 4. We'll start from the very beginning by creating our Laravel app using composer, creating the database, loading in the Twitter Bootstrap, creating a main layout, registering users, logging in and out, and protecting routes using filters. We've got a lot of code to cover, so let's get started!Read More…
  • Web Design
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Code
    Theme Development
    How to Integrate Bootstrap Navbar Into WordPress ThemeBootstrapd 400
    Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and you already know about Bootstrap and use it in mock-ups for development. This raises the question: "How can you integrate Bootstrap components into a WordPress theme?"Read More…