Oh, drop downs, you cheeky little things!

Why is it? Form elements are fully customizable using simple CSS styling except <select> drop downs. Oh sure, you can tweak colors, sizes, fonts, etc. but I’m talking about overriding the native controls and really making them your own. Of course, you can use jQuery, which is an excellent solution in most cases, but sometimes introducing additional scripts can interfere with what’s going on under the hood.

I recently stumbled upon a neat concept, and after a little wrangling, I was surprised to have found a pretty simple way to override the native <select> drop down. Oh, happy day!

Here’s a basic drop down:

<select>
  <option>Option</option>
  <option>Option</option>
</select>

And here it is, natively ranging from hi-tech glossy to just plain ugly:

Throw a few color styles on it and you get this…

But we’re trying to achieve something more like this…

What we want to do is wrap the select in a div. We already know a div can be fully customized: round corners, image backgrounds, gradients, etc. So, we’re basically styling the background container for the select.

<div class="style-select">
   <select>
      <option>Option</option>
      <option>Option</option>
   </select>
</div>

Here’s what we have so far, wrapped in a styled div…

I’m using a lighter shade of grey to illustrate how the select is sitting inside the div container, but we’re going to set the background to transparent anyway, so it looks like this…

To customize the arrow, we add a right aligned background image to the containing div, like so…

Now, let’s set the overflow to hidden and scoot that blocky native arrow out of the way by setting the <select> width to 120%.

The <select> is still there, but it’s wider than the container, so it’s technically off the radar. Overflow is set to hidden, so anything beyond the size of the containing div is clipped.

Here’s the final CSS for the select and its styled containing div.

.styled-select select {
   background: transparent;
   width: 120%;
   padding: 4px;
   font-size: 12px;
   color: #999;
   -webkit-appearance: none;
   }
.styled-select {
   width: 145px; 
   height: 24px;
   overflow: hidden;
   background: url(dropArrow.png) no-repeat right #515151;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   }

This works beautifully on Safari, Chrome and Firefox. As expected, IE doesn’t display the dropdown as we ultimately designed it, but it gracefully ignores the styles and only displays the semi-styled native <select>

And with a few minor viewport and size tweaks, it also works on mobile. Bonus!