X
WHAT DO YOU NEED?
YOUR DETAILS
* Required Fields
THANK YOU for contacting us

We endeavour to answer all enquiries within 1 business day, so you’ll be hearing from us shortly.

In the meantime we’d love you to get social with us
or perhaps you’d like to sign up to our newsletter?
You’ll receive FREE actionable tips and insights to improve your website

REQUEST A QUOTErope

BLOG

Style a Select Box Using CSS

23 Nov 2012
11 Comments

Here at Limelight Online we are committed to designing visually appealing websites for our clients.

One of the challenges of my role as a web developer is making the design provided by our designers look as good in a browser as it does in the mock up.

A website that I completed recently had select boxes that looked like this:

 

Comparing this to what a standard html select box looks like:

I thought to myself, how am I going to do this using CSS, as parts of the select box are browser specific, such as the drop down arrow.  The solution also has to work in all the different browsers such as Firefox, IE, Chrome and Safari.

After a little bit of thought, this is the solution I came up with.

<div class="search-container">
    <span>Size</span>
    <div class="search-box">
        <div class="size-container">
        <select name="size" id="size">
            <option value="0">ANY</option>
            <option value="100">100-200</option>
            <option value="200">200-300</option>
            <option value="300">300-400</option>
            <option value="400">400-500</option>
            <option value="500">500-600</option>
            <option value="600">600+</option>
        </select>
        </div>
    </div><span style="padding-left:20px;">Bedrooms</span>
    <div class="search-box" style="left:6px; width:98px;">
        <div class="bedrooms-container">
        <select name="bedrooms" style="width:103px;">
            <option value="0">ANY</option>
            <option value="1">ONE</option>
            <option value="2">TWO</option>
            <option value="3">THREE</option>
            <option value="4">FOUR</option>
            <option value="5">FIVE</option>
            <option value="6">SIX</option>
            <option value="7">SEVEN+</option>
        </select>
        </div>
    </div>
</div>

So how does this all work?

Firstly I put the search elements into a containing div.   This div includes our grey background colour etc.

.search-container {
    width: 925px;
    height: 63px;
    background-color: #e1e1e1;
    position: relative;
}

Next I formatted the select box based on the design provided.  This involved setting the width, height etc.  Make sure you set the background colour to transparent so that our custom arrow will show later down the track.
We also need to include -webkit-appearance : none; to get it to work properly in Chrome.

.search-box select {
    width: 137px;
    height: 50px;
    border: 0;
    background-color: transparent;
    color: #4d4d4d;
    font-family: 'oswaldregular', Calibri;
    text-transform: uppercase;    
    font-size: 22px;
    padding: 10px 0 5px 6px;
    cursor:pointer;
    -webkit-appearance: none;
}

The select boxes need to be positioned in line with each other, so to do this I added some CSS to our search-box class.

.search-box {
    display: inline-block;
    height: 50px;
    padding-top: 7px;
    padding-left: 7px;
    position:relative;
    width:128px;
}

Because I cannot format the drop down directly using CSS, I want to hide it instead.  To do this I put the select box in another containing div and set the width to less than what the width of the actual select bow is set to.  I then set the overflow on my containing div to hidden.  This will hide the drop down arrow.
Note: Each select box will have its own unique container as they are both different sizes.

.size-container {
    overflow: hidden;
    width: 116px;
    display: inline-block;
}
.bedrooms-container {
    overflow: hidden;
    width: 86px;
    display: inline-block;
}

Since we have hidden the drop down arrow we need to replace it with our own arrow.  To do this we need an image of our new arrow.  Then add the arrow as a background image to our overflow div, setting position as right and also applying the background colour of what we want the select box to look like.

.size-container {
    overflow: hidden;
    width: 116px;
    display: inline-block;
    background: url("../images/new_arrow.png") no-repeat right #c8c8c8;
}
.bedrooms-container {
    overflow: hidden;
    width: 86px;
    display: inline-block;
    background: url("../images/new_arrow.png") no-repeat right #c8c8c8;
}

Finally we need to apply some formatting to our labels.  To do this I applied the following CSS.

.search-container span {
    line-height: 69px;
    padding-left: 12px;
    vertical-align: top;    
    font-family: 'oswaldregular',Calibri;
    text-transform: uppercase;    
    color: #000000;
    font-size: 22px;
}

And there you have it.  Our select boxes match the design provided using nothing but CSS. 

Written by
Aaron joined our web development team in 2012 as a Junior Web Developer. Aaron is responsible for the development of many of our client websites turning great designs into highly functional sites. Originally from Gisborne, Aaron moved to New Plymouth in 2004 after graduating from Otago University with a degree in Information Science.

Add a comment11 Comments

Reply Anne | March 18th, 2013 at 7:20pm
Hi... can you give us a link to the website so we can see it in action? And does this work with responsive websites?
Reply Aaron Zame (Author) | March 25th, 2013 at 4:02pm
Hi Anne,

Here is the link to the webpage where you can see the select boxes. http://www.dsignaconcepts.co.nz/search.php

That website isnt responsive but this example would work on a responsive website as you can just adjust the CSS for the different devices (i.e desktop, tablet, mobile).

Cheers
Aaron.
Reply Kshitiz | May 11th, 2013 at 9:25pm
Grt work...!!!
Reply Sam | May 14th, 2013 at 9:08pm
Hi, Nice example. Is there any solution for removing the position:relative from the container of the select element?
I am creating themes and I do not want to tell developer to add extra markup for the style. Is it possible to style the select by *ONLY* using CSS ?
Reply Aaron Zame (Author) | May 15th, 2013 at 4:34pm
Hi Sam,
I've actually just had to style a select box in a latest website that I have been working on. As with any solution the more you use it the more you tweak it to make it more efficient.
Basically what I did was put the select box into a container div. The container div has our width and overflow set to hidden as well as our background image of the new arrow. Our select box within our container div has a width greater than our container so that the default arrow is hidden. Dont forget to set the background colour of the select box to transparent and the new arrow should show up fine. So no relative positioning needed.
Unfortuantely I cannot provide the link of the website where I have just done this as its still in development but once the website is live i'll post it here.

Cheers
Aaron.
Reply Sam | May 15th, 2013 at 4:48pm
Thanks Aaron, I was able to style my select box with the help of this post. Thanks for posting this.
Reply Aaron Zame (Author) | May 15th, 2013 at 4:55pm
Cool
Reply Joao Cunha | August 26th, 2013 at 1:45am
In case you want to hide the select tag (dropdown) arrow on firefox, here is how to do it: https://gist.github.com/joaocunha/6273016
Reply Aaron Zame (Author) | August 26th, 2013 at 11:25am
Thanks Joao, that's a great solution.
Reply Carrie | October 29th, 2013 at 7:57am
Hi-ya,
Chrome and FF are great. IE is a big mess. You say above this should work in IE, no? Thanks! This is great!
Reply Aaron Zame (Author) | October 30th, 2013 at 8:53am
Hi Carrie,

What version of IE are you using? I know it doesn't work too well if you have compatibility mode on.

Cheers
Aaron

Leave a comment

Fields marked * are required