Skip to content

Instantly share code, notes, and snippets.

@tessalt
Created March 21, 2013 19:35
Show Gist options
  • Select an option

  • Save tessalt/5216008 to your computer and use it in GitHub Desktop.

Select an option

Save tessalt/5216008 to your computer and use it in GitHub Desktop.
.select-menu {
display: inline-block;
position: relative;
overflow: hidden;
height: 28px;
width: 150px;
background: #fff;
border: 1px solid #dbdbdb;
border-radius: 3px;
&:before, &:after {
content: '';
position: absolute;
z-index: 2;
top: 9px;
right: 10px;
width: 0;
height: 0;
border: 4px dashed;
border-color: #dcdcdc transparent;
pointer-events: none;
}
&:before {
border-bottom-style: solid;
border-top: none;
}
&:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
select {
position: relative;
width: 130%;
margin: 0;
padding: 6px 8px 6px 10px;
height: 28px;
line-height: 14px;
font-size: 12px;
color: #696562;
background: #fff; /* Fallback for IE 8 */
background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
border: 0;
border-radius: 0;
-webkit-appearance: none;
&:focus {
outline: none;
}
& > option {
margin: 3px;
padding: 6px 8px;
text-shadow: none;
background: #f2f2f2;
border-radius: 3px;
cursor: pointer;
}
}
}
.lt-ie9 .select-menu {
z-index: 1;
}
.lt-ie9 .select-menu select {
z-index: -1;
}
.lt-ie9 .select-menu select:focus {
z-index: 3;
}
/* Dirty fix for Firefox adding padding where it shouldn't. */
@-moz-document url-prefix() {
.select-menu select {
padding-left: 6px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment