Created
March 13, 2012 07:06
-
-
Save ry5n/2027364 to your computer and use it in GitHub Desktop.
CSS3 Input Placeholders using Sass 3.2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Handle browser inconsistencies with placeholder pseudo-elements. | |
@mixin placeholders { | |
&::-webkit-input-placeholder { @content; } | |
&:-moz-placeholder { @content; } | |
&::placeholder { @content; } | |
} | |
// Set the colour for input placeholder text. | |
@mixin placeholder($color: #bfbfbf) { | |
@include placeholders { | |
color: $color; | |
} | |
} |
Requires Sass 3.2 (uses the new mixin content feature).
An improved version of this gist is already in Compass' master branch and should land in the next release (code below). Until then you can use it as a custom mixin in your own stylesheets:
// Style the html5 input placeholder in browsers that support it.
//
// The styles for the input placeholder are passed as mixin content.
// For example:
//
// @include input-placeholder {
// color: #bfbfbf;
// font-style: italic;
// }
@mixin input-placeholder {
@if $experimental-support-for-webkit {
&::-webkit-input-placeholder { @content; }
}
@if $experimental-support-for-mozilla {
&:-moz-placeholder { @content; }
}
@if $experimental-support-for-microsoft {
&:-ms-input-placeholder { @content; }
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I wonder, which version of Compass and Sass I have to use in my Gemfile to be able to use this?