Skip to content

Instantly share code, notes, and snippets.

@Abban
Created July 1, 2013 13:52
Show Gist options
  • Save Abban/5900964 to your computer and use it in GitHub Desktop.
Save Abban/5900964 to your computer and use it in GitHub Desktop.
HTML Select Boxes That Don't Suck. For blog post (http://abandon.ie/notebook/simple-html-select-that-doesnt-suck)
<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>
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; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment