Skip to content

Instantly share code, notes, and snippets.

@ry5n
Created March 13, 2012 07:06
Show Gist options
  • Save ry5n/2027364 to your computer and use it in GitHub Desktop.
Save ry5n/2027364 to your computer and use it in GitHub Desktop.
CSS3 Input Placeholders using Sass 3.2
// 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;
}
}
@rmetzler
Copy link

I wonder, which version of Compass and Sass I have to use in my Gemfile to be able to use this?

@ry5n
Copy link
Author

ry5n commented Jul 13, 2012

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