Home » Pure CSS select dropdown style – override the default select dropdown styles with CSS

Pure CSS select dropdown style – override the default select dropdown styles with CSS

Custom CSS Dropdown Style

I was recently tasked with coding a template that was made by a designer that doesn’t quite understand the headache involved in using custom styles on a select element. After explaining to my client what components I had control over styling, they decided to move forward with changing their select elements to use a custom style. Let’s dive into my approach on a Pure CSS select dropdown style that should allow you to override the default select dropdown styles with your own using only cross-browser CSS techniques.

In order to do this we’re going to need a containing element for the select element, so I’ve decided to use a label so that text can be put before the select to make the select labeled. This example will be applied to labels with the “dropdown” class.

Let’s start with the CSS:

And here’s the HTML:

Here’s a working example of this for you to play around with and test:

http://jsfiddle.net/jphase/quqnmoun/

I’ve tested the styling in Chrome 45.x, Firefox 41.x, and Internet Explorer 11.x. If you see any issues with styles looking funny, feel free to post which browser, browser version, and OS you’re using and I’ll update the CSS to fix the issue. That being said, your site will probably have some default styles that might conflict with the styles in this tutorial.

If you run into issues with the styles rendering on your site, feel free to paste a URL to that site along with your comment and I’ll try to figure out how to get the styles to render correctly for your site. Cheers 🙂

One comment on “Pure CSS select dropdown style – override the default select dropdown styles with CSS

  1. smita sonkusare on

    Hi,

    Very nice tutorial, it helps alot to me.
    I just have one query.
    Can we change drop down image to up when its open.

    Thanks in Advance.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *