over 9 years ago
Making Animated Placeholder
To make a Placeholder animation we need to make custom placeholder, for this I have used span tag.
HTML -
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- .input_field{
- position: relative;
- }
- .input_field input[type="text"]{
- padding: 10px;
- background: rgba(0,0,0,0.4);
- width: 50%;
- border: none;
- }
- .input_field span.placeholder.remove{
- transform:translateY(-90%);
- opacity: 0;
- }
- .input_field span.placeholder{
- display: inline-block;
- position: absolute;
- top: 0;
- left: 0;
- color: #fff;
- padding: 7px 9px;
- opacity: 1;
- transition:all 0.7s ease-in-out 0s;
- }
- </style>
- <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
- <script>
- $(function(){
- $('.input_field input[type="text"]').focus(function(){
- $('.input_field span.placeholder').addClass('remove');
- });
- $('.input_field input[type="text"]').focusout(function(){
- $('.input_field span.placeholder').removeClass('remove');
- });
- });
- </script>
- </head>
- <body>
- <div class="input_field">
- <span class="placeholder">Email</span>
- <input type="text">
- </div>
- </body>
- </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> .input_field{ position: relative; } .input_field input[type="text"]{ padding: 10px; background: rgba(0,0,0,0.4); width: 50%; border: none; } .input_field span.placeholder.remove{ transform:translateY(-90%); opacity: 0; } .input_field span.placeholder{ display: inline-block; position: absolute; top: 0; left: 0; color: #fff; padding: 7px 9px; opacity: 1; transition:all 0.7s ease-in-out 0s; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(function(){ $('.input_field input[type="text"]').focus(function(){ $('.input_field span.placeholder').addClass('remove'); }); $('.input_field input[type="text"]').focusout(function(){ $('.input_field span.placeholder').removeClass('remove'); }); }); </script> </head> <body> <div class="input_field"> <span class="placeholder">Email</span> <input type="text"> </div> </body> </html>
0 Comment(s)