Created
June 29, 2017 00:15
-
-
Save ugumerie/112b5e45dbf74f303aad38f894657a15 to your computer and use it in GitHub Desktop.
Awesome form label used by modern websites
This file contains hidden or 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
| <body> | |
| <!--Form--> | |
| <form class="awesome-form"> | |
| <div class="input-group"> | |
| <input type="text" /> | |
| <label>Your Full Name</label> | |
| </div> | |
| <div class="input-group"> | |
| <input type="email" /> | |
| <label>Your Email Address</label> | |
| </div> | |
| <input type="submit" /> | |
| </form> | |
| </body> |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
This file contains hidden or 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
| $(document).ready(function () { | |
| $('.awesome-form .input-group input').focusout(function () { | |
| var text_val = $(this).val(); | |
| //checks if the input field is empty and add class appropriately | |
| if (text_val === "") { | |
| $(this).removeClass('has-value'); | |
| } else { | |
| $(this).addClass('has-value'); | |
| } | |
| }); | |
| }); |
This file contains hidden or 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
| body { | |
| padding: 100px; | |
| -webkit-font-smoothing:antialiased; | |
| } | |
| input{ | |
| background:none; | |
| border:2px solid #21a1e1; | |
| color: #21a1e1; | |
| padding:15px 40px; | |
| font-size:18px; | |
| display:inline-block; | |
| } | |
| input:focus, input:active{ | |
| outline:none; | |
| } | |
| [type="text"], [type="email"]{ | |
| border:none; | |
| border-bottom:2px solid #21a1e1; | |
| } | |
| [type="submit"]:hover, [type="submit"]:active{ | |
| color:white; | |
| background:#21a1e1; | |
| } | |
| .input-group{ | |
| display:inline-block; | |
| margin-right: 20px; | |
| position:relative; | |
| } | |
| .input-group input{ | |
| padding:15px 0; | |
| } | |
| label{ | |
| position:absolute; | |
| top:50%; | |
| left:0px; | |
| font-family:Georgia; | |
| font-style:italic; | |
| font-size:18px; | |
| color:#999; | |
| transform:translateY(-50%);/*position the label in the middle*/ | |
| pointer-events:none; | |
| transition-duration:0.3s; | |
| } | |
| input:focus + label, input.has-value + label{/*adjacent neighbor or neighbor N/B: not descendant*/ | |
| top:-10px; | |
| font-size:12px; | |
| color:#aaa; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment