Skip to content

Instantly share code, notes, and snippets.

@sorahn
Created February 6, 2015 23:34
Show Gist options
  • Save sorahn/a7c0a70bf65c5e227fa1 to your computer and use it in GitHub Desktop.
Save sorahn/a7c0a70bf65c5e227fa1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
@mixin appearance($var) {
-webkit-appearance: $var;
-moz-appearance: $var;
appearance: $var;
}
@mixin clean-select($background: white, $color: black, $height: 30px, $use-font-awesome: true) {
height: $height;
position: relative;
display: inline-block;
background: $background;
&::after {
position: absolute;
z-index: 5;
top: 0;
right: 0;
width: $height;
height: $height;
line-height: $height;
text-align: center;
pointer-events: none;
color: $color;
@if $use-font-awesome {
content: "\f0d7";
font-family: FontAwesome;
}
@else {
content: "\0025BC";
}
}
select {
@include appearance(none);
border-radius: 0;
position: relative;
z-index: 10;
border: 0;
line-height: $height;
height: $height;
background: transparent;
padding: 0 $height 0 $height / 2;
color: $color;
cursor: pointer;
&:focus {
outline: 0;
border: 0;
&::-ms-value {
background: transparent;
color: $color;
}
}
&:-moz-focusring {
color: transparent;
}
&::-ms-expand {
display: none;
}
}
option {
color: black;
}
}
.select {
@include clean-select(red, white, $use-font-awesome: false);
}
.select {
height: 30px;
position: relative;
display: inline-block;
background: red;
}
.select::after {
position: absolute;
z-index: 5;
top: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
pointer-events: none;
color: white;
content: "\0025BC";
}
.select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
position: relative;
z-index: 10;
border: 0;
line-height: 30px;
height: 30px;
background: transparent;
padding: 0 30px 0 15px;
color: white;
cursor: pointer;
}
.select select:focus {
outline: 0;
border: 0;
}
.select select:focus::-ms-value {
background: transparent;
color: white;
}
.select select:-moz-focusring {
color: transparent;
}
.select select::-ms-expand {
display: none;
}
.select option {
color: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment