Style select menu

Question

Is it possible to style a <select> menu like the following image:

Here is a fiddle that I have been working on but can not get the arrow correct.

http://jsfiddle.net/nmpxj/

Here is the HTML:

<select>
  <option>Alabama</option>
  <option>Alaska</option>
</select>

Here is the CSS:

select {
background: -webkit-linear-gradient(#C9C9C9, #CCC);
background: -moz-linear-gradient(#C9C9C9, #CCC);
border: 1px solid #ccc;
color: white;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);    
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding:10px;
}

Is it possible to style a <select> menu like this?

Answer 1

The way you need to do it is basically float them both left and clear their right's as follows

select { float:left; clear:right; }
div { float:left; clear:right; }

This will push them close together. Also you shouldn't use the <p> tag beside the select box. Put the arrow inside a div instead there is no reason not to and it will remove the space when you float them as well. It is just cleaner coding to do it this way.