Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created April 16, 2011 22:56
Show Gist options
  • Save mirisuzanne/923593 to your computer and use it in GitHub Desktop.
Save mirisuzanne/923593 to your computer and use it in GitHub Desktop.
styling placeholder text
// Mixins ---------------------------------------------------------------
=placeholder-style
color: #777
// add your defaults here.
// if you need more than one style-group you can either create several mixins,
// or just name the style-groups and take a single style-group-name argument.
=apply-placeholders
&::-webkit-input-placeholder
+placeholder-style
&:-moz-placeholder
+placeholder-style
&.placeholder
+placeholder-style
// Template --------------------------------------------------------------
// you can create as many templates as you need for your site
.placeholders
+apply-placeholders
// Placeholders --------------------------------------------------------------
// call the template with @extend when you can
// or, when fighting the cascade you can call the mixin
input, textarea
@extend .placeholders
.something
+apply-placeholders
.placeholders::-webkit-input-placeholder, input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #777777;
}
.placeholders:-moz-placeholder, input:-moz-placeholder, textarea:-moz-placeholder {
color: #777777;
}
.placeholders.placeholder, input.placeholder, textarea.placeholder {
color: #777777;
}
.something::-webkit-input-placeholder {
color: #777777;
}
.something:-moz-placeholder {
color: #777777;
}
.something.placeholder {
color: #777777;
}
// Multiple Placeholder Styles ---------------------------------------------------------------
=placeholder-style($style:false)
// main styles used by default
@if (not $style) or ($style == 'main')
color: #777
// alternative style
@if $style == 'alt'
color: #444
=apply-placeholders($style:false)
&::-webkit-input-placeholder
+placeholder-style($style)
&:-moz-placeholder
+placeholder-style($style)
&.placeholder
+placeholder-style($style)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment