Oh, drop downs, you cheeky little things!

Image

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:

Image

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

Image

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…

Image

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…

Image

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!

Image

Daisey Traynham

Daisey Traynham

UI/UX Designer at Art+Logic
Daisey Traynham has been designing user interfaces for Art+Logic since 2001. She's a digital nomad who also tours the world as a soul/funk singer. Current location: either somewhere in SE Asia, floating around Europe or living in a camper van in the Northwest United States.
Daisey Traynham

Latest posts by Daisey Traynham (see all)

Tags:

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

1 Comment

  1. ddasari

    oh man. that’s a pretty great way to style the dropboxes. thx!