How to Customize the Drop-down List Using CSS

Do you know the feeling you get, when you spend several hours toiling to make everything look perfect, only to be beaten by a browser! Let me explain. So, my day began by testing out a page I was building for a client’s website. And that it when I noticed a problem. While this particular *irk* would have gone unnoticed by an untrained eye, my UI designer goggles took a note of it right away.

The problem was, that in different browsers, the select field was being rendered differently. Which I know, isn’t a recent problem. The thing is, every browser renders the field in its own way. Firefox being the worst (in this case)… worst! And this inconsistency was a dark stain on my work-of-art.

So, let’s cut short the drama 😀 . The next thing I did was obviously try to fix this problem. By googling about it. I wasn’t ready to be beaten that easily. Some forums suggested I use the -moz-appearance or -webkit-appearance properties, but I couldn’t find a solution that actually worked.

Style the Drop-Down List with CSS

Now, I knew that I needed some CSS, which I had to use in the right way to solve this problem. But it wasn’t very obvious, till one of my experiments actually gave me an idea.

If You Can’t Change it… Hide It!

Since the problem was mainly the drop-down button, a simple option was to hide it, across all browsers, and to replace it with your own image to make the select element appearance consistent across all browsers. I’ll explain it to you in a step by step process.

1. Place the Drop-Down List inside a Container 
To begin with, we need a defined area for the select field. This area will have to be marked by a div container, and the select field is placed inside another div.

<div class="search_categories">
    <div class="select">
       <select name="search_categories" id="search_categories">
          <option value="1" selected="selected">Happy</option>
          <option value="2">Great</option>
          <option value="3">Nice Solution</option>
          <option value="4">Awesome</option>
        </select>
     </div>
 </div>

The outer div container marks the area the drop-down will appear in the browser. The inner div contains the drop-down list. Let’s add some basic CSS before we continue:

.search_categories{
  font-size: 13px;
  padding: 10px 8px 10px 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  position: relative;
}

So here’s what we’ll have:

2. Increase the Width of the Drop-Down List
Next, is to increase the width of the drop-down list, so that a part of the list is actually outside the containing outer div. And this is done using CSS of course. And while we’re at it, let’s style the drop-down list as well. And you have entire liberty to style it in the way you need.

.search_categories .select{
  width: 120%;
}

.search_categories .select select{
  background: transparent;
  line-height: 1;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: 120%;
  position: relative;
  z-index: 10;
  font-size: 1em;
}

Here’s what we’ll have:

3. Hide the Drop-Down Button
The final step is to cut down the width of the list, by simply hiding it using CSS. You know what you have to do here! Just add overflow:hidden to the search_categories class.

4. Refine the Appearance
Oh yes! I almost forgot. So the field, might not appear as a list to users, on account of the drop-down button being hidden. So to make the field an intuitive drop-down list, the final-est step is to modify the select class a bit, and add a background arrow image.

.search_categories .select{
  width: 120%;
  background:url('arrow.png') no-repeat;
  background-position:80% center;
}

And done!

[space]

All the CSS in one place…

To help you out, here’s all the CSS I’ve used, in one place!

.search_categories{
  font-size: 13px;
  padding: 10px 8px 10px 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.search_categories .select{
  width: 120%;
  background:url('arrow.png') no-repeat;
  background-position:80% center;
}

.search_categories .select select{
  background: transparent;
  line-height: 1;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: 120%;
  position: relative;
  z-index: 10;
  font-size: 1em;
}

[space]

As a UX developer, I want every bit to be perfect, even if it involves adding some additional CSS. And even though the problem did not break any functionality, it was important to fix, to improve user experience. So, although my day started out bad… it ended happy because I fixed the problem 🙂 …. So, if you’re looking for something similar, do try this, and let me know if it helped you out. Cheers!