Created
July 30, 2018 20:21
-
-
Save snap44/4ba15da405a9b033260f9d6ff7bef2bf to your computer and use it in GitHub Desktop.
floatingPlaceholder
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
.wrapper { position: relative; } | |
.control:focus ~ .floating-label, | |
.control:not(:focus):valid ~ .floating-label{ | |
top: 6px; | |
left: 5px; | |
font-size: 11px; | |
opacity: 0.6; | |
} | |
.control { | |
font-size: 14px; | |
width: 200px; | |
height: 45px; | |
} | |
.floating-label { | |
position: absolute; | |
pointer-events: none; | |
left: 20px; | |
top: 14px; | |
transition: 0.3s ease all; | |
} | |
</style> | |
<div class="wrapper"> | |
<input type="text" class="control" required/> | |
<span class="floating-label">First Name</span> | |
</div> | |
<div class="wrapper"> | |
<input type="text" class="control" required/> | |
<span class="floating-label">Last Name</span> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment