Created
January 31, 2018 12:47
-
-
Save kayza-media/de0ff78fe4b03fe14e791ad22c19c201 to your computer and use it in GitHub Desktop.
CSS Only input field animation // source https://jsbin.com/foqixiy
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>CSS Only input field animation</title> | |
| <style id="jsbin-css"> | |
| .field { | |
| display: block; | |
| position: relative; | |
| } | |
| .field__input{ | |
| width: 100%; | |
| box-sizing: border-box; | |
| background-color: #fff; | |
| appearance: none; | |
| border-radius: 0; | |
| border-style: solid; | |
| border-color: #f3f3f3; | |
| border-top-width: 0; | |
| border-right-width: 0; | |
| border-bottom-width: 3px solid #f3f3f3; | |
| border-left-width: 0; | |
| padding: 7px 10px; | |
| font-family: inherit; | |
| font-size: 100%; | |
| color: inherit; | |
| } | |
| .field__input::-webkit-input-placeholder { | |
| color: gray; | |
| opacity: 0; | |
| } | |
| .field__input::-moz-placeholder{ | |
| color: gray; | |
| opacity: 0; | |
| } | |
| .field__input:focus{ | |
| outline: none; | |
| } | |
| .field__input:focus::-webkit-input-placeholder{ | |
| transition: opacity .3s ease-out .3s; | |
| opacity: 1; | |
| } | |
| .field__input:focus::-moz-placeholder{ | |
| transition: opacity .3s ease-out .3s; | |
| opacity: 1; | |
| } | |
| .field__label-wrap{ | |
| height: 100%; | |
| display: block; | |
| } | |
| .field__label{ | |
| position: absolute; | |
| top: 8px; | |
| left: 10px; | |
| pointer-events: none; | |
| font-size: .9em; | |
| transition: top .3s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .3s ease-out; | |
| will-change: top, opacity; | |
| } | |
| .field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{ | |
| opacity: 0; | |
| top: 7px; | |
| } | |
| .field__input:focus ~ .field__label-wrap .field__label{ | |
| opacity: 1; | |
| top: -15px; | |
| } | |
| .field_type_input .field__label-wrap:before, .field_type_input .field__label-wrap:after{ | |
| content: ""; | |
| width: 0; | |
| height: 3px; | |
| background-color: red; | |
| position: absolute; | |
| bottom: 0; | |
| will-change: width; | |
| transition: width .3s ease-out; | |
| } | |
| .field_type_input .field__label-wrap:before{ | |
| left: 50%; | |
| } | |
| .field_type_input .field__label-wrap:after{ | |
| right: 50%; | |
| } | |
| .field_type_input .field__input:focus ~ .field__label-wrap:before, | |
| .field_type_input .field__input:focus ~ .field__label-wrap:after{ | |
| width: 50%; | |
| } | |
| /** only wrapper | not neccesary **/ | |
| .page__section { | |
| margin: 2rem; | |
| font-family: sans-serif; | |
| } | |
| /** end **/ | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page__section"> | |
| <label class="field field_type_input"> | |
| <input class="field__input" placeholder="[email protected]"> | |
| <span class="field__label-wrap"> | |
| <span class="field__label">Enter your e-mail</span> | |
| </span> | |
| </label> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">.field { | |
| display: block; | |
| position: relative; | |
| } | |
| .field__input{ | |
| width: 100%; | |
| box-sizing: border-box; | |
| background-color: #fff; | |
| appearance: none; | |
| border-radius: 0; | |
| border-style: solid; | |
| border-color: #f3f3f3; | |
| border-top-width: 0; | |
| border-right-width: 0; | |
| border-bottom-width: 3px solid #f3f3f3; | |
| border-left-width: 0; | |
| padding: 7px 10px; | |
| font-family: inherit; | |
| font-size: 100%; | |
| color: inherit; | |
| } | |
| .field__input::-webkit-input-placeholder { | |
| color: gray; | |
| opacity: 0; | |
| } | |
| .field__input::-moz-placeholder{ | |
| color: gray; | |
| opacity: 0; | |
| } | |
| .field__input:focus{ | |
| outline: none; | |
| } | |
| .field__input:focus::-webkit-input-placeholder{ | |
| transition: opacity .3s ease-out .3s; | |
| opacity: 1; | |
| } | |
| .field__input:focus::-moz-placeholder{ | |
| transition: opacity .3s ease-out .3s; | |
| opacity: 1; | |
| } | |
| .field__label-wrap{ | |
| height: 100%; | |
| display: block; | |
| } | |
| .field__label{ | |
| position: absolute; | |
| top: 8px; | |
| left: 10px; | |
| pointer-events: none; | |
| font-size: .9em; | |
| transition: top .3s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .3s ease-out; | |
| will-change: top, opacity; | |
| } | |
| .field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{ | |
| opacity: 0; | |
| top: 7px; | |
| } | |
| .field__input:focus ~ .field__label-wrap .field__label{ | |
| opacity: 1; | |
| top: -15px; | |
| } | |
| .field_type_input .field__label-wrap:before, .field_type_input .field__label-wrap:after{ | |
| content: ""; | |
| width: 0; | |
| height: 3px; | |
| background-color: red; | |
| position: absolute; | |
| bottom: 0; | |
| will-change: width; | |
| transition: width .3s ease-out; | |
| } | |
| .field_type_input .field__label-wrap:before{ | |
| left: 50%; | |
| } | |
| .field_type_input .field__label-wrap:after{ | |
| right: 50%; | |
| } | |
| .field_type_input .field__input:focus ~ .field__label-wrap:before, | |
| .field_type_input .field__input:focus ~ .field__label-wrap:after{ | |
| width: 50%; | |
| } | |
| /** only wrapper | not neccesary **/ | |
| .page__section { | |
| margin: 2rem; | |
| font-family: sans-serif; | |
| } | |
| /** end **/ | |
| </script> | |
| </body> | |
| </html> |
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
| .field { | |
| display: block; | |
| position: relative; | |
| } | |
| .field__input{ | |
| width: 100%; | |
| box-sizing: border-box; | |
| background-color: #fff; | |
| appearance: none; | |
| border-radius: 0; | |
| border-style: solid; | |
| border-color: #f3f3f3; | |
| border-top-width: 0; | |
| border-right-width: 0; | |
| border-bottom-width: 3px solid #f3f3f3; | |
| border-left-width: 0; | |
| padding: 7px 10px; | |
| font-family: inherit; | |
| font-size: 100%; | |
| color: inherit; | |
| } | |
| .field__input::-webkit-input-placeholder { | |
| color: gray; | |
| opacity: 0; | |
| } | |
| .field__input::-moz-placeholder{ | |
| color: gray; | |
| opacity: 0; | |
| } | |
| .field__input:focus{ | |
| outline: none; | |
| } | |
| .field__input:focus::-webkit-input-placeholder{ | |
| transition: opacity .3s ease-out .3s; | |
| opacity: 1; | |
| } | |
| .field__input:focus::-moz-placeholder{ | |
| transition: opacity .3s ease-out .3s; | |
| opacity: 1; | |
| } | |
| .field__label-wrap{ | |
| height: 100%; | |
| display: block; | |
| } | |
| .field__label{ | |
| position: absolute; | |
| top: 8px; | |
| left: 10px; | |
| pointer-events: none; | |
| font-size: .9em; | |
| transition: top .3s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .3s ease-out; | |
| will-change: top, opacity; | |
| } | |
| .field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{ | |
| opacity: 0; | |
| top: 7px; | |
| } | |
| .field__input:focus ~ .field__label-wrap .field__label{ | |
| opacity: 1; | |
| top: -15px; | |
| } | |
| .field_type_input .field__label-wrap:before, .field_type_input .field__label-wrap:after{ | |
| content: ""; | |
| width: 0; | |
| height: 3px; | |
| background-color: red; | |
| position: absolute; | |
| bottom: 0; | |
| will-change: width; | |
| transition: width .3s ease-out; | |
| } | |
| .field_type_input .field__label-wrap:before{ | |
| left: 50%; | |
| } | |
| .field_type_input .field__label-wrap:after{ | |
| right: 50%; | |
| } | |
| .field_type_input .field__input:focus ~ .field__label-wrap:before, | |
| .field_type_input .field__input:focus ~ .field__label-wrap:after{ | |
| width: 50%; | |
| } | |
| /** only wrapper | not neccesary **/ | |
| .page__section { | |
| margin: 2rem; | |
| font-family: sans-serif; | |
| } | |
| /** end **/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment