How To Style HTML Select Dropdown Using Only CSS

Style HTML Select Box Using Only CSS 800x249 - How To Style HTML Select Dropdown Using Only CSS

This post was last updated on March 21st, 2019 at 02:35 pm

Styling an HTML select dropdown was always pretty frustrating because the annoying drop down arrow always stays the same. There isn’t too much stuff we can apply to it, just properties like color, background, font or border. As there is no direct way to do style it, it took me a while to figure out how easily we can style an HTML select dropdown using only CSS.

In this article, I'm going to show you a quick and easy way to style the select dropdown.

Disclaimer, Though there are a lot of jQuery plugins that can help you build beautiful and sophisticated dropdowns, sometimes I feel, it is just too much for a dropdown.

The HTML markup

To get started, we just need a default HTML drop-down markup.

<select class="select_box"> 
    <option value="1">This is option 1</option> 
    <option value="2">This is option 2</option> 
    <option value="3">This is option 3</option> 
    <option value="4">This is option 4</option> 
    <option value="5">This is option 5</option> 
</select>

The CSS

The default dropdown arrow and a border is all part of the default "appearance" of the form element.So, you just need to make sure appearance: none; is set in your styling css. Here background image holds the custom arrow.

/* body select.select_box */ 
body select { 
    display: block;
    padding: 10px 70px 10px 13px !important; 
    max-width: 100%; 
    height: auto !important; 
    border: 1px solid #e3e3e3; 
    border-radius: 3px; 
    background: url("https://i.ibb.co/b7xjLrB/selectbox-arrow.png") right center no-repeat; 
    background-color: #fff; 
    color: #444444; 
    font-size: 12px; 
    line-height: 16px !important; 
    appearance: none; 
    /* this is must */ -webkit-appearance: none; 
    -moz-appearance: none; 
} 
/* body select.select_box option */ 
body select option { 
    padding: 0 4px; 
} 
/* for IE and Edge */ 
select::-ms-expand { 
    display: none; 
} 
select:disabled::-ms-expand { 
    background: #f60; 
}

Knowing this little quick and easy workaround will make it a whole lot easier to style select dropdown. If you see any issues with CSS or not working as expected, Your site probably have some default styles that might conflict. In that scenario, you've to use the above CSS in a class.

If you like this post, I would also recommend that you read another tutorial on "How To Style Checkbox or Radio Button Using Only CSS"
About This Author

My name is Parameshwar Roy (P. Roy), and I am a web developer. This is my personal blog to record my own thoughts. Though I am not a natural writer, I love to share my experiences. Hope my experiences will be useful to you...read more about me

7 Comments

You can post comments in this post.


  • This is awesome. Quick and simple..Thanks.

    Lou Barnes 7 years ago Reply


  • This is amazing, such a simple solution! Thanks so much 🙂

    Matt 7 years ago Reply


  • Nice one! =) I’ve played arount with this a little – if you add “select::-ms-expand { display: none; }”, this works on IE and Edge too (otherwise their ugly little arrow’s still visible) 😉

    Any idea why this works only with fully overwriting the background (with background: url();) and then setting a bg-color instead of background-image / background-color?

    Daniel Geiser 7 years ago Reply


    • Parameshwar Roy Proy 150x150 - How To Style HTML Select Dropdown Using Only CSS

      “background” property comes with multiple attributes like “background color, image, repeat, position” Whereas “background-image” property has only one attributes (only add image).

      Above Example:
      background: #fff url(“https://i.ibb.co/b7xjLrB/selectbox-arrow.png”) right center no-repeat;

      or

      background-image: url(“https://i.ibb.co/b7xjLrB/selectbox-arrow.png”);
      background-repeat: no-repeat;
      background-position: right center;
      background-color: #fff;

      P. Roy 7 years ago Reply


  • works well thanks…

    ChizyTony 7 years ago Reply


  • This works great, thanks very much.

    Jim 6 years ago Reply


  • Awesome! Saved my couple of hours!! Thanks a lot.

    Gazi 6 years ago Reply


Leave A Reply