How to style select boxes using CSS and HTML

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

<div class='select_style'>
  <select>
      <option>Tell Me I'm pretty</option>
  </select>
<div>

The CSS

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

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.

.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;
}

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 access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?