SCSS input placeholder mixin and usage example
/*********************
PLACEHOLDER STYLING
*********************/
@mixin placeholder {
$prefixes : (":-webkit-input","-moz",":-moz","-ms-input");
@each $prefix in $prefixes {
&:#{$prefix}-placeholder {
@content;
}
}
}
#filter-search-query {
@include border-radius(0.75em);
width:100%;
border:1px solid #d8d8d8;
padding:0.3em 0.9em;
@include placeholder { // placeholder usage
color:#eee;
font-family:$sans-serif;
&:before {
font-family:$icon-font;
content:$icon-search;
padding-right:5px;
}
}
}