Create a Custom Drop-Down List Using just CSS

By November 11, 2013CSS, Design, Programming, Tips & Tricks

So, you’ve created this awesome looking mockup that contains a few form elements. Chances are you’ve designed a beautiful looking Select drop-down menu. However, once you start writing up the mark-up you’re stuck with the ugly browser defaults. No more…

In this post I’m going to show you a really easy way to customize the look and style of a Select drop-down using purely CSS. Now you’ll no longer need to settle for the various browser default styles Chrome, Safari, and Firefox has to offer. Let’s do this!

1) First things first, let’s removed the default style.

Just for shits and giggles I’m going to give our drop-down a class called “custom-dropdown.”

select.custom-dropdown {
 -webkit-appearance: none;  /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
 -moz-appearance: none;  /*REMOVES DEFAULT FIREFOX STYLE*/
 border: 0 !important;  /*REMOVES BORDER*/
}

You’re going to get something that looks like this. Exciting right? Ok, maybe not yet.

2) Let’s go ahead and add the blue background, rounded corners, and some padding to get this looking closer.

select.custom-dropdown {
 -webkit-appearance: none;  /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
 -moz-appearance: none;  /*REMOVES DEFAULT FIREFOX STYLE*/
 border: 0 !important;  /*REMOVES BORDER*/

 background-color: #0d98e8;
 color: #fff;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 font-size: 14px;
 padding: 10px;
 width: 35%;
 cursor: pointer;
}

Starting to shape up I’d say.


Quick note: There are two ways to accomplish this style. One way which isn’t as flexible is including a complete background image. For responsive layouts this isn’t very ideal. That said, the more you can accomplish with CSS the better.

3) Adding in the drop-down arrow is the last step.

Again, I like UI elements to be as flexible as possible so that I can easily tweak them with minimal effort. So, when creating the drop-down arrow image with the darker background I used a transparent PNG. Instead of using a darker shade of blue to pull off the effect, I simply used black with 15% opacity. This way, if you want to change the color of your drop-down you can do it with CSS in a matter of seconds.

select.custom-dropdown {
 -webkit-appearance: none;  /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
 -moz-appearance: none;  /*REMOVES DEFAULT FIREFOX STYLE*/
 border: 0 !important;  /*REMOVES BORDER*/

 color: #fff;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 font-size: 14px;
 padding: 10px;
 width: 35%;
 cursor: pointer;

 background: #0d98e8 url(drop-down-arrow.png) no-repeat right center;
 background-size: 40px 37px; /*TO ACCOUNT FOR @2X IMAGE FOR RETINA */
}

Waaaalaaaaaa. Custom Select Drop-Down!


Have a question about this simple CSS trick? Leave a comment below.

  • Sean

    This doesn’t appear to work in IE8 unfortunately 🙁

    • Kevin Fremon

      Sean, you’re right. IE8 doesn’t like quite a few custom CSS tricks. I should have put browser compatibility on this post. If I find a way to do it in IE8, I’ll let you know.

      Have a great day!

  • ert
  • sdfsdf

    fuck you

  • sdfsdf

    fuck your drop down in firefox

  • vsync

    not working at all… I see the default arrow on the right side (win7, FF32)

  • Reginald Vheriwa

    Thanks. Is there a way to make the arrow (and darker blue area) appear above the text in cases where the option values are longer than the selection box?

  • Kyle Lowe

    I would recommend either adding a truncation to the value being displayed or right padding for the dropdown display so you do not see the value bleeding into or behind the chevron.

    • Kevin Fremon

      Great suggestion Kyle. I appreciate it. I’ll add that to that to this post soon.

      Have a great day!

  • Mark Dods

    This seems to wrrk well, except in IE11. I’m getting the default drop list down arrow displayed as well as the .png down arrow. How can I disable the default IE11 down arrow?

  • Channu Yatnur

    Hi

    I have one drop downbox at the top of website,when open drop down list and hover the main menu the drop down content is displaying over the main menu content as in attached screenshot.
    Please help me to solve this issue, im new bie to css and html.

  • Nizam uddin

    hiii
    I have apply on my project its work
    good..please explain easy way to make custom radio button and checkbox.