Skip to content

Instantly share code, notes, and snippets.

@mervick
Forked from mturnwall/SassMeister-output.css
Created September 4, 2018 06:39
Show Gist options
  • Save mervick/c28f9963129626a9c9300be114e7e474 to your computer and use it in GitHub Desktop.
Save mervick/c28f9963129626a9c9300be114e7e474 to your computer and use it in GitHub Desktop.
SASS mixin for styling input placeholder text
// ----
// libsass (v3.2.5)
// ----
/// Style the placeholder attribute of input[type="text"] fields.
/// This mixin can be applied globally or on specific text fields
/// @example
/// // all input and textareas
/// @include inputPlaceholder() {
/// color: red;
/// font-weight: 300;
/// padding-top: 5px;
/// }
/// // just textareas
/// textarea {
/// @include inputPlaceholder() {
/// padding: 15px;
/// }
/// }
///
@mixin inputPlaceholder() {
$selector: '';
$prefixes: (
moz: "::-moz",
webkit: "::-webkit",
ie: ":-ms"
);
@each $prop, $value in $prefixes {
@if $prop != "moz" {
$selector: #{$value}-input-placeholder;
} @else {
$selector: #{$value}-placeholder;
}
@if & {
&#{$selector} {
@content;
}
} @else {
#{$selector} {
@content;
}
}
}
&::placeholder {
@content;
}
}
@include inputPlaceholder() {
color: red;
font-weight: 300;
padding-top: 5px;
}
textarea {
@include inputPlaceholder() {
padding: 15px;
}
}
::-moz-placeholder {
color: red;
font-weight: 300;
padding-top: 5px;
}
::-webkit-input-placeholder {
color: red;
font-weight: 300;
padding-top: 5px;
}
:-ms-input-placeholder {
color: red;
font-weight: 300;
padding-top: 5px;
}
::placeholder {
color: red;
font-weight: 300;
padding-top: 5px;
}
textarea::-moz-placeholder {
padding: 15px;
}
textarea::-webkit-input-placeholder {
padding: 15px;
}
textarea:-ms-input-placeholder {
padding: 15px;
}
textarea::placeholder {
padding: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment