Custom Form Menus with CSS, JQuery & Select Box

One of the most frustrating form elements to style with CSS is the <select> tag and its child <option>s.

A little bit of JQuery can make this a lot easier – I downloaded the JQuery Select Box Plugin & managed to create a nice custom design with a bit of CSS3

The design I coded for the dropdown was inspired by a dribbbler, Alvin Thong, who created a free psd set that is similar in style to this dropdown menu. If you like the look of the menu, I recommend checking out the rest of his kit!

View the demo

The HTML

The html is exactly the same as what you would normally do for a dropdown in a form:

<select name="favourite-fruit">
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="bananas">Bananas</option>
  <option value="pears">Pears</option>
</select>


The Javascript

You need to be using the JQuery library on your site in order for this to work, and you also need to use the SelectBox plugin. I included these two files just before my closing </body> tag, and then called the SelectBox plugin to change my html <select>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.selectBox.js"></script>

<!-- using selectbox to change the select tag -->
<script type="text/javascript">
  $(document).ready( function() {
    $("select").selectBox();
  });
</script>

What selectbox does is ‘hide’ the original html you put together and generates html (an unordered list) that is easier to customize. It gives everything a class, so that it’s easily manipulated, and changes the class on ‘dropdown’ so that you can customize the look and feel based on whether the menu is being looked at or not.

The CSS

You can view the CSS in its original file, because it’s quite long!

The important classes to remember are:

• .selectBox-dropdown – This is the dropdown menu you see right away. It shows the currently selected item + the arrow to the right.
• .selectBox-menuShowing – This is for the same dropdown menu that you see right away, but is an extra class applied only when the menu is open, so that you can add styles for the ‘open’ appearance.
• .selectBox-arrow – This is the arrow part of the dropdown menu so that you can change how it looks. I used a background image for the arrow icon, and when .selectBox-menuShowing is active, I change the background colour of the arrow part as well, to match the menu items.
• .selectBox-dropdown-menu – This is the unordered list that shows all your dropdown menu options. It’s only visible when you ‘open’ the menu.

A portion of the code explained – example of .selectBox-arrow before and after menu activation


/* This is how the arrow looks all the time. We position it to the far right of the select box, give it its width & heght and a background of the arrow. */
.selectBox-dropdown .selectBox-arrow {
  position: absolute;
  right: 0;
  top: 0;
  width: 53px;
  height: 100%;
  background: url("arrow.png") 50% center no-repeat;
  border-left: solid 1px #7d5b1c;
  cursor: pointer;
}



/* This is some extra styling on the arrow when the dropdown is activated. */
.selectBox-dropdown.selectBox-menuShowing .selectBox-arrow {
  background-color: #ffd842;
  box-shadow: inset 1px 1px 0px 0px #fff24b;
  border-bottom: solid 1px #ffd842;
}


The Download

Download the entire source code for this example
Feel free to play around with it and come up with your own neat dropdown menus!