How to Change the Default Select Drop-Down List with CSS

How to Change the Default Select Drop-Down List with CSS

September 19, 2013 by Jonathan Perez 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 stackoverflowOk 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:

Creating Functions within a Justinmind Prototype

Tools to Create Beautiful Online Presentations for Your Startup

Communication Tips and Tools for Improving Your Workflow from Design to Development

A Well-Designed Workspace is a Productive Workspace

How to Remove Unused CSS in WordPress Using Gulp

front-End development, Style Select Dropdown



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!REPLY

DynamicSymmetry October 15, 2013 at 3:46 pm # Very good article, helped me a lot. Keep up the awesome work!REPLYIllusory Dreamer October 22, 2013 at 11:47 am # It working really amazing, but I still want design more. Here is my example:1. I have done everything you said => It’s work!2. But I got a problem:On FF:_ Text doesn’t auto center and middle in select tag._ It also got a border at option tags.On Cr:_ Text doesn’t auto center in select tag._ It can’t auto center in option tags and got a border like a same on FF.Here is my code:CSS:#changeSearch {background: {color:Theme Colour};float: left;height: 100%;width: 100px;font-size: 18px;line-height: 40px;text-align: center;cursor: pointerborder: 0!important;color: whitetext-indent: 0.01px;text-overflow: “”;-moz-appearance: none;-webkit-appearance: none}HTML:GoogleThis BlogYahooBingREPLY



Jonathan Perez October 30, 2013 at 3:07 pm #
Hey Illusory Dreamer, do you have a link so I can check it out?REPLY

YO October 31, 2013 at 10:02 pm # For IE:insert dropdownlist or select into a div and using overflow:hiddenadjust widthREPLY



Jonathan Perez October 31, 2013 at 10:11 pm #
Awesome – Thanks very much for the IE info!REPLY

Oscar Ortiz November 18, 2013 at 1:25 pm # Thanks!!!!, works real amazing…REPLYMarcos W November 19, 2013 at 8:30 pm # I Found this to solve the IE problemselect::-ms-expand {display: none;}REPLY



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



Jonathan Perez December 2, 2013 at 3:18 pm #
Thanks for the tip Marcos!REPLY



ginny December 3, 2013 at 3:03 am #
Thanks .I checked and it only work on IE 10. It can’t apply for IE9.REPLY

coolbeans November 20, 2013 at 6:04 pm # The problem I have is that my options are data driven and text size could be large. If it goes beyond the selected option set width, the text is overlapping the graphic arrow now. Is there a way (other than trimming text in returned data) to not have the text on top of the arrow? Note: I still want the arrow clickable.REPLYNadeem December 3, 2013 at 6:49 pm # Thanks, working like a charm.REPLYpradeep December 11, 2013 at 8:00 pm # Here is the fix for IE9 and below…. you enclose the select in a div and provide the width for div lower than the select and make it overflow:hidden. This will hide the arrow in all the browsers.div {width: 80px;overflow: hidden;border: 1px solid black;}select {width: 100px;border: 0px;}REPLYDev January 7, 2014 at 9:37 am # Thanks, but the drop down options exceed the defined width of the dropdown, any fix for this ?REPLY



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

carplu February 5, 2014 at 11:17 am # Hithis helped me style my dropdowns – as far as i can tell it works in all (recent) browsers …i use the :after psuedo element on the dive above the select element to display the arrow though, because some mobile browsers didn’t display the arrow as background inside selectnow it displays perfectly well in : chrome, opera, safari, ie, firefox and mobile browsers: default samsung android, dolphin, safari, chrome, operaBUTin firefox mobile browser i keep getting the default settings + the added arrow (so now i have 2 arrows and default backgroundanyone have a workaround for that one?you can check here: http://www.yiper.nl/restaurantsMafitsi February 14, 2014 at 1:34 pm # Here is a solution for all browsers, including IE8-IE9-IE10HTMLQuestion oneQuestion twoCSS.dropdown {overflow: hidden;float: left;width: 185px;height: 34px;line-height: 34px;border: #E6E6E6 1px solid;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;-o-border-radius: 3px;background: #FFFFFF url(arrow_up_down.png) no-repeat 99% 50%;}.dropdown select {width: 210px;padding: 0 4px;cursor: pointer;text-indent: 0.01px;text-overflow: “”;font-size: 15px;color: #777777;border: 0 !important;-webkit-appearance: none;-moz-appearance: none;background: transparent;}.dropdown select::-ms-expand {display: none;}Hope, it’ll help



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*/}REPLY

You may try another method:http://jsfiddle.net/kartofelek007/Zh3w6/vypuc June 16, 2014 at 8:22 am # what about this one ?http://cssdeck.com/labs/styling-select-box-with-css3Jason October 20, 2015 at 12:19 am # Nice tutorial, i found another solution that hides the arrow then creates a text “>” and rotates it. The end result looks neat and doesn’t require any images. There is a tutorial of it here:https://fabriceleven.com/design/clever-way-to-change-the-drop-down-selector-arrow-icon/REPLY