How to Change the Default Select Drop-Down List with CSS
September 19, 2013 by Design Programming
In this article I’m going to help you style a Select drop-down input with just CSS without the need for javascript.
Ok let’s get to it!
So here’s the story – The awesome designer in your team sends you a new PSD (Photoshop Document) with the final design of a new website or app. You go through the different documents looking at all the pages that will be be included in the new site.
Everything looks fine and dandy until you see that he/she designed a select drop-down input different from the default style given by the browsers! You say “No way!, doesn’t everyone knows that it’s extremely hard (not really) to change the default styling of a drop-down input!?!?!”
Well the reality is that you shouldn’t complain to the designer because little things like this makes you push yourself a little bit harder and not rely on default stylings just because.
This article is based on two workarounds (One for Chrome and Safari and one for Firefox) already posted on the web. I’m just consolidating this two workarounds in one article.
Credit for Chrome workaround goes to Chris Coyier from CSS-tricks.com
Credit for Firefox workaround goes to Joo Cunha who posted this on stackoverflow
Ok let’s get started!
Let’s say that the design for the drop-down is this one:
When we add the html for a Select Dropdown we get this:
Firefox Default styling
Chrome Default Styling
Not very pretty.
First to remove the border and default style we just add this to the CSS:
(I gave the select input a class name of .dropdown)
.dropdown select {
border: 0 !important;. /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
}It will start to look something like this on Firefox:
On Chrome:
On Safari:
Wow that was easy! but we still need some details.
To add the blue arrow from the design we just slice it from Photoshop and add it as a background-image.
The CSS should look like this:
.dropdown select {
border: 0 !important;. /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url('you_own_image_arrow.png') no-repeat;
}and this should give you something like this:
We now just have to make the select input wider and tweak the position of the arrow image, in this case I gave the select dropdown a width of 105px (So we have space for the arrow), and a background-position of 82px 7px;
Note: This might be different in your situation.
Your CSS now looks like this:
.dropdown select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: url('dropdown_arrow.png') no-repeat; /*Adds background-image*/
background-position: 82px 7px; /*Position of the background-image*/
width: 100px; /*Width of select dropdown to give space for arrow image*/}Looks like this on Chrome and Safari:
but this is what you get in Firefox:
Basically the arrow image is behind the firefox default arrow, it’s difficult to remove this default arrow but thanks to Joo Cunha I was able to fix this.
So to remove this arrow on firefox we need to add to our CSS this:
text-indent: 0.01px; text-overflow: "";
The CSS should look like this now:
.dropdown select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: url('dropdown_arrow.png') no-repeat; /*Adds background-image*/
background-position: 82px 7px; /*Position of the background-image*/
width: 100px; / *Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/}and voilà!!!!
Pure awesomeness if you ask me 
Now you can just style the text as you want.
I added a blue color for the dropdown text so it looks similar to the design.
So my final result looks like this:
So as you can see this works pretty good, the only problem as always is Internet Explorer.
(let me know if you know a way to do this on IE)
This works on Chrome, Firefox, and Safari.
The final HTML:
<div class="dropdown"> <p>Show: </p> <select> <option> 18 per page</option> <option> 10 per page</option> <option> 5 per page</option> </select></div> <!-- DropDown -->
and the CSS:
.dropdown p {
display: inline-block;
font-weight: bold;}.dropdown select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: url('dropdown_arrow.png') no-repeat; /*Adds background-image*/
background-position: 82px 7px; /*Position of the background-image*/
width: 100px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/
/*My custom style for fonts*/
color: #1455a2;}Note (IE Fix) – Thanks to Marcos W for providing a fix for IE. To fix it just apply this to your CSS:
select::-ms-expand { display: none; }
Subscribe
Subscribe to our e-mail newsletter to receive updates.
Related Posts:
Tools to Create Beautiful Online Presentations for Your Startup
Communication Tips and Tools for Improving Your Workflow from Design to Development
J Smilanic October 10, 2013 at 8:27 pm #
This is pretty good but there’s a couple issues:
1. It doesn’t seem to get rid of the default arrow in Firefox unfortunately. I’m running the most current version on Windows 7.
2. Seems as though you’re missing the HTML snippet under “The Final HTML:”
but thanks this was helpful!
Jonathan Perez October 30, 2013 at 3:07 pm #
Hey Illusory Dreamer, do you have a link so I can check it out?
Jonathan Perez October 31, 2013 at 10:11 pm #
Awesome – Thanks very much for the IE info!
Shane February 6, 2014 at 4:03 am #
Could this be updated in the blog post please? Even if as just a side-note? I went and figured it out myself – I didn’t realise it was in the comments… Thanks!
Great article.
Jonathan Perez December 2, 2013 at 3:18 pm #
Thanks for the tip Marcos!
ginny December 3, 2013 at 3:03 am #
Thanks .I checked and it only work on IE 10. It can’t apply for IE9.
Jonathan Perez January 7, 2014 at 2:38 pm #
You can adjust the width of the drop-down select and the background-position until you get the desired effect.
H
Jonathan Perez March 18, 2014 at 2:38 pm #
Hey Jasa – Yes, you can remove the border/outline after the click by adding to your CSS:
.dropdown select:focus {
outline: 0; /* remove focus outline*/
}