When designing a website, inconstancy between browsers is often a concern and the fact is that select boxes are one of the worst when it comes to different browsers – simply put, they all want to style them differently and, quite frankly, they don’t look that great.

niceselect-jquery-select-plugin

What makes it even worse, is that most browsers do not allow much, if any, customisation (looking at you IE). Luckily, there are ways to make the horrible default select fields match the design that you spent hours working on. Enter the solution: The first method allows you to change the basic styles of a select field, not including the option styles, and is quite easy to implement. So, let’s begin. The HTML

[html]
<div class=’select_style’>
<select>
<option>Tell Me I’m pretty</option>
</select>
<div>
[/html]

The CSS

[css]
.select_style {
overflow:hidden;
}
.select_style select {
-webkit-appearance: none;
appearance:none;
width:120%;
background:none;
background:transparent;
border:none;
outline:none;
}
[/css]

This fiddle shows what you should now have. Not the prettiest thing in the world is it? So, let’s go one step further, and prettify it with some more CSS.

[css]
.select_style {
background: #FFF;
overflow: hidden;
display: inline-block;
color: #525252;
font-weight: 300;
-webkit-border-radius: 5px 4px 4px 5px/5px 5px 4px 4px;
-moz-border-radius: 5px 4px 4px 5px/5px 5px 4px 4px;
border-radius: 5px 4px 4px 5px/5px 5px 4px 4px;
-webkit-box-shadow: 0 0 5px rgba(123, 123, 123, 0.2);
-moz-box-shadow: 0 0 5px rgba(123,123,123,.2);
box-shadow: 0 0 5px rgba(123, 123, 123, 0.2);
border: solid 1px #DADADA;
font-family: ‘helvetica neue’,arial;
position: relative;
cursor: pointer;
padding-right: 20px;
}

.select_style span {
position: absolute;
right: 10px;
width: 8px;
height: 8px;
background: url(‘http://projects.authenticstyle.co.uk/niceselect/arrow.png’) no-repeat;
top: 50%;
margin-top: -4px;
}
[/css]

Now let’s head on over to JSFiddle to see the result.

Want more customisation?

You may have noticed that the options boxes are still looking quite ugly. This is because changing those styles is quite a bit harder to do and involves a lot of preparation and javascript / jQuery. Well not to worry, it just so happens I have made a jQuery plugin for you to use. Take a look see and let me know what you think. Niceselect or download it directly from Niceselect Download
Would you like us to make a WordPress Plugin for you? Just get in touch and we’d be happy to discuss your requirements

Subscribe to our newsletter!

Get the latest tips and advice through the Authentic Style newsletter

Please enable JavaScript in your browser to complete this form.

by subscribing you’ll receive periodic emails from us with helpful website tips.

Let’s create something
great together.

All great things start with a chat. Use the adjacent form or our project planner to get things started.

Project Planner

We’re currently accepting projects
Please enable JavaScript in your browser to complete this form.

Authentic Insights