HTML Select Boxes That Don't Suck. For blog post (http://abandon.ie/notebook/simple-html-select-that-doesnt-suck)

select.html

<div class="select">
  <select name="select_element">
		<optgroup label="Option Group 1">
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
		</optgroup>
		<optgroup label="Option Group 2">
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
		</optgroup>
	</select>
</div>

select.less

div.select
{
    .border-radius(5px);
    height: 35px;
    line-height: 33px;
    overflow: hidden;
    border:1px solid #e8e8e8;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin: 0 0 20px 3px;
    padding:0 0 0 5px;
    position: relative;
    &:after
    {   
        .gradient(#fefefe, #fefefe, #ddd);
        content:'▼'; // You may need to add an icon font
        font-size: 0.8em;
        position: absolute;
        top:0;
        right:0;
        height: 100%;
        padding: 3px 7px 0;
        border-left: 1px solid #ddd;
    }
    &:hover:after
    {
        color:@link;
    }
    >select
    {
        position: relative;
        z-index: 99;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: window;
        background: none;
        width: 100%;
        padding: 1px 20px 0 3px;
        border: 0;
        box-shadow: none;
        &:focus, &:active{outline:none !important;}
        &:hover{ cursor: pointer; }
    }
}