blog

Photo of code by Ferenc Almasi on Unsplash

Oh, drop downs, you cheeky little things!

by

Software screen capture

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:

Software screen capture

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

Software screen capture

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

Software screen capture

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…

Software screen capture

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…

Software screen capture

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

Software screen capture

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%.

Software screen capture

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!

Software screen capture

+ more