Standardise the Appearance of Web Drop Down List

Posted by & filed under Tech, Web Development. 12,952 views

Drop-down list also known as “select list”, “listbox”, is one of the most common form user interface control you will encounter when you make form. We know how it works, how to use it but the appearance of drop-down list is out of our control. Hate it or Ignore it, different OS and different browsers, they render the way drop down list is totally different, inconsistent and simply annoying. To show you what I meant, check this out:

In this tutorial, we will show you how to standardise the appearance of drop-down list by using a plugin called DropKick – a custom drop down. We will use this plugin as the foundation and theme it with two of the free psd layout from favbulous.

UI Element - A set of buttons and a drop down menu.

Slice it up!

Before we can integrate the design into jquery.dd, we need to plan and slice it up. We ware using CSS Image sprite in this tutorial, thus we will need some planning. You can refer to the following illustration to see how I do it. Basically, we strip off all its content in the design and rearrange the it in such a layout that we can reference every part of it in CSS.

The Blueprint

Before we do that, we need to know the html out put of DropKick plugin. I guess everything should know about firefox web developer toolbar, you able to see the javascript generated code by using the “view generated source” in the menu. This is what we have, very compact and just everything we need to style it up.

<!-- DropKick plugin injects inline CSS, it gets the width 
from the width predefined in the select dropdownlist -->
<div style="display: block;" class="dk_container dk_theme_black" id="dk_container_and_me" tabindex="2">
	<a style="width: 136px;" class="dk_toggle"><span class="dk_label">I'm a demo</span></a>
	<div class="dk_options">
		<ul class="dk_options_inner">
			<li class="dk_option_current"><a data-dk-dropdown-value="">I'm a demo</a></li>
			<li class=""><a data-dk-dropdown-value="he">He's a demo</a></li>
			<li class=""><a data-dk-dropdown-value="she">She's a demo</a></li>
			<li class=""><a data-dk-dropdown-value="all">We're all demos, hey</a></li>
		</ul>
	</div>
</div>

<!-- This part will be hidden by the plugin and replace it with a good looking one -->
<select style="display: none;" name="and_me" class="black" tabindex="2">
	<option value="">I'm a demo</option>
	<option value="he">He's a demo</option>
	<option value="she">She's a demo</option>
	<option value="all">We're all demos, hey</option>
</select>

This is how we integrate the CSS sprite to the html. The following image shows us the background images for .dk_toggle, .dk_label and .dk_options. For the pink drop down list, we’re going to skin the .dk_options and for the other, we will simply use CSS to skin it up.

Style it up

DropKick came with a default CSS template. We grabbed the download version and reskin to something we want (You can see some comments from the DropKick author). The following is the CSS for the pink drop down menu. For the blue and green, they are pretty much the same just a different height and background images, so we’re not going to show it here but you can check it out in the demo and download.

/* One container to bind them... */
.dk_theme_pink {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
  margin-bottom: 18px;
  text-align:left;
}
  .dk_theme_pink:focus {
    outline: 0;
  }
  .dk_theme_pink a {
    cursor: pointer;
    color:#333;    
    text-decoration: none;
  }
  .dk_theme_pink a:hover {
    text-decoration: none;
  }  

/* Opens the dropdown and holds the menu label */
.dk_theme_pink .dk_toggle {
  background: url('images/dk_sprite.png') no-repeat right -45px;
  color: #333;
  text-shadow: #fff 1px 1px 0;
  height:42px;
  padding-right:31px;
}
  .dk_theme_pink .dk_toggle:hover {
    border-color: #8c8c8c;
  }
  
  .dk_theme_pink .dk_toggle .dk_label {
    display:block;
    background: url('images/dk_sprite.png') no-repeat 0 0;
    height:42px;
    line-height:32px;
    padding-left:10px;
  }
  
  /* Applied when the dropdown is focused */
  .dk_theme_pink.dk_focus .dk_toggle {
  }

/* Applied whenever the dropdown is open */
.dk_theme_pink.dk_open {
  /**
   * Help: Dropdown menu is covered by something
   * Try setting this value higher
   */
  z-index: 10;
}
  .dk_theme_pink .dk_open .dk_toggle {
    color: #ccc;
  }

/* The outer container of the options */
.dk_theme_pink .dk_options {
   background: transparent url('images/dk_sprite.png') no-repeat 0 bottom;
   padding-bottom:20px;
   padding-top:5px;   
   margin-top:-10px;
}

	.dk_theme_pink .dk_options ul {
	list-style: none;
	padding:0;
	margin:0;
	}

  .dk_theme_pink .dk_options li {
    border-top: 1px solid #ccc;  
    margin:0;
  }

  .dk_theme_pink .dk_options a {
    border-top: 1px solid #fff;
    font-weight: bold;
    padding: 8px 10px;
  }
  .dk_theme_pink .dk_options li:last-child a {
    border-bottom: none;
  }
  .dk_theme_pink .dk_options a:hover,
  .dk_theme_pink .dk_option_current a {
    background-color: #e958bb;
    border-top: 1px solid #e958bb;
    color: #fff;
    text-decoration: none;
    text-shadow: rgba(0, 0, 0, .5) 0 1px 0;
  }

/* Inner container for options, this is what makes the scrollbar possible. */
.dk_theme_pink .dk_options_inner {
  color: #333;
  max-height: 250px;
  text-shadow: #fff 0 1px 0;
}

/* Set a max-height on the options inner */
.dk_theme_pink .dk_options_inner,
.dk_theme_pink .dk_touch .dk_options {
  max-height: 250px;
}

Finally

Alright, after all the works we have done, you should able to see the final result- 3 pretty looking drop down list. Aren’t they look attractive and tempt us to click on it? 🙂

In favbulous, we collect hundreds of free PSD all around the web, but we also show you how to use them by integrating it with popular and stable javascript plugins. If you want more from us, stay in touch with us via social media.

SHARE IT

RELATED POSTS

New Challenges in Responsive Web Design
Advantages of Small Business Phone Lines
More Options Are Available When Using the Right POS System

COMMENTS