Skip to content

Instantly share code, notes, and snippets.

@jeangontijo
Last active June 14, 2018 14:41
Show Gist options
  • Save jeangontijo/7567bdaea517b2a45a1e746ce424d4d6 to your computer and use it in GitHub Desktop.
Save jeangontijo/7567bdaea517b2a45a1e746ce424d4d6 to your computer and use it in GitHub Desktop.
Floating Label
.floating-label {
position: relative;
margin-bottom: 10px;
label {
position: absolute;
top: calc(50% - 7px);
left: 0;
opacity: 0;
transition: all .3s ease;
}
input:not(:placeholder-shown) {
padding: 28px 0px 12px 0px;
}
input:not(:placeholder-shown) + label {
transform: translateY(-10px);
opacity: .7;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment