<div class="styled-select">
<select>
<option>But Wait, There's </option>
<option>Thing 1</option>
<option>Thing 2</option>
</select>
</div>
@import "compass/css3";
@mixin wgr--styled-select-box ($border-thickness, $border-color, $border-radius, $width, $height, $background-color, $padding, $arrow-color, $arrow-width, $arrow-height, $text-indent, $font-size, $font-family, $background-color-hover, $border-color-hover, $arrow-color-hover, $font-color, $font-color-hover){
.styled-select {
display: inline-block;
border: $border-thickness solid $border-color;
position: relative;
border-radius: $border-radius;
width: $width;
overflow: hidden;
background: $background-color;
&:hover {
background-color: $background-color-hover;
border: $border-thickness solid $border-color-hover;
&:before {
background-color: $border-color-hover;
}
&:after{
border-color: $arrow-color-hover transparent transparent transparent;
}
select {
color: $font-color-hover;
}
}
&, > * {
cursor: pointer;
}
select {
@include box-sizing(border-box);
background: transparent;
border: 0;
outline: 0;
color: $font-color;
padding: $padding;
padding-left: $text-indent;
padding-right: $height + $padding;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: $font-size;
font-family: $font-family;
width: 100%;
height: $height;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: radio-container;
appearance: none;
}
&:after {
content: '';
width: 0;
position: absolute;
right: ($height / 2) - $arrow-width ;
top: 50%;
margin-top: - ($arrow-height /2);
border-width: $arrow-height $arrow-width;
border-style: solid;
pointer-events: none;
border-color: $arrow-color transparent transparent transparent;
}
&:before {
content: '';
position:absolute;
width: $height;
height: $height;
background-color: $border-color;
right: 0;
pointer-events: none;
}
}
}
@include wgr--styled-select-box(1px, #000, 0, 50%, 60px, #fff, 6px, #fff, 10px, 10px, 10px, 1.5rem, inherit, #dedede, #444, #fff, #222, #000);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.