Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save marioizquierdo/1071716 to your computer and use it in GitHub Desktop.
Save marioizquierdo/1071716 to your computer and use it in GitHub Desktop.
// 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
.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