Skip to content

Instantly share code, notes, and snippets.

@marioizquierdo

marioizquierdo/input-placeholder_mixin.sass

Forked from chriseppstein/input-placeholder_mixin.sass
Created July 8, 2011 12:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save marioizquierdo/1071716 to your computer and use it in GitHub Desktop.
Save marioizquierdo/1071716 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
input-placeholder_mixin.sass
// Style this how you want it to look
.input-placeholder-text
color: #777
=input-placeholder
&.placeholder
@extend .input-placeholder-text
&:-moz-placeholder
@extend .input-placeholder-text
&::-webkit-input-placeholder
@extend .input-placeholder-text
form#login input
+input-placeholder
Raw
output.css
.input-placeholder-text {
color: #777777;
}
form#login input.placeholder {
color: #777777;
}
form#login input:-moz-placeholder {
color: #777777;
}
form#login input::-webkit-input-placeholder {
color: #777777;
}
@marioizquierdo
Copy link
Author

The styles for :-moz-placeholder and ::-webkit-input-placeholder can not be mixed, otherwise they will not work.

@vidhill
Copy link

vidhill commented Jul 7, 2016

This would be a good place to use a placholder class e.g.:

%input-placeholder-text {
  color: #777777;
}

=input-placeholder
  &.placeholder
    @extend %input-placeholder-text
  &:-moz-placeholder
    @extend %input-placeholder-text
  &::-webkit-input-placeholder
    @extend %input-placeholder-text

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment