Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Animating Placeholder

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 258
    Comment on it

    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">
            <meta charset="utf-8">
                    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{
                    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;
            <script src=""></script>
                    $('.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');
            <div class="input_field">
                <span class="placeholder">Email</span>
                <input type="text">

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: