Skip to content

Instantly share code, notes, and snippets.

@rtivital
Last active December 2, 2019 08:09
Show Gist options
  • Save rtivital/75caebe3bff350e44930 to your computer and use it in GitHub Desktop.
Save rtivital/75caebe3bff350e44930 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<input type="email" placeholder="[email protected]" class="input">
// ----
// libsass (v3.3.2)
// ----
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
.input {
padding: .5rem;
@include placeholder {
color: #aaa;
text-indent: 0px;
transition: text-indent 300ms;
}
&:focus {
@include placeholder {
text-indent: 500px;
}
}
}
.input {
padding: .5rem;
}
.input::-webkit-input-placeholder {
color: #aaa;
text-indent: 0px;
transition: text-indent 300ms;
}
.input:-moz-placeholder {
color: #aaa;
text-indent: 0px;
transition: text-indent 300ms;
}
.input::-moz-placeholder {
color: #aaa;
text-indent: 0px;
transition: text-indent 300ms;
}
.input:-ms-input-placeholder {
color: #aaa;
text-indent: 0px;
transition: text-indent 300ms;
}
.input:focus::-webkit-input-placeholder {
text-indent: 500px;
}
.input:focus:-moz-placeholder {
text-indent: 500px;
}
.input:focus::-moz-placeholder {
text-indent: 500px;
}
.input:focus:-ms-input-placeholder {
text-indent: 500px;
}
<input type="email" placeholder="[email protected]" class="input">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment