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]--> <head> <meta charset="utf-8"> <title>Dark Select</title> <meta name="description" content=""> <meta name="author" content=""> <!-- Don't Forget the Viewport Metatag http://enva.to/A79s3G --> <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="https://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <select name="dropdown" class="dropdown"> <option>Settings...</option> <option>Your profile</option> <option>Your account</option> <option>Notifications</option> <option>Sign Out</option> </select> </body> </html>
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>',
'</a>',
'<div class="dk_options">',
'<ul class="dk_options_inner">',
'</ul>',
'</div>',
'</div>'
].join(''),
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.
Conclusion
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.