Gmail Login Input Field Style!

A few days back Gmail changed it’s login screen with a nice interactive input field with floating labels when the user focus to write. This looks awesome and reminds of many android native device form fields. The ionic framework also having options to create a similar type of form fields with floating labels on them.

In this post, I will create a form inspired by similar style form fields for email and password. Here I will use on basic CSS and a pinch of jQuery code. I have kept this simple without using any bootstrap class so that it can be easily plugged and customized as per requirement.

So, let’s begin implementation of this Gmail style form. This will be a small tutorial having some CSS and some jQuery even listeners.

 

First of all, we have following HTML, where we have each form field wrapped in a selector “.field-wrapper” with a floating label wrapped in selector “.field-placeholder”

    <div class="form-wrapper-outer">

        <div class="form-logo">
            <img src="https://www.freakyjolly.com/wp-content/uploads/2017/08/cropped-fjlogo2.png" alt="logo">
        </div>
        <div class="form-greeting">
            <span>It's nice to meet you.</span>
        </div>


        <div class="field-wrapper">
            <input type="email" name="email" id="">
            <div class="field-placeholder"><span>Enter your email</span></div>
        </div>
        <div class="field-wrapper">
            <input type="password" name="password" id="">
            <div class="field-placeholder"><span>Enter your password</span></div>
        </div>
        <div class="form-button">
            <button type="button" class="btn btn-primary">Login</button>
        </div>

    </div>

In CSS we following code, when a field gets focus the placeholder text changes position using CSS transformations.

        .form-wrapper-outer{
            padding: 40px;
            border-radius: 8px;
            margin: auto;
            width: 460px;
            border: 1px solid #DADCE0;
            margin-top: 7%;
        }

        .form-wrapper-outer .form-logo{
            margin: 0px auto 15px;
            width: 100px;
        }
		
        .form-wrapper-outer .form-logo img{
            width: 100%;
        }
		
        .form-greeting{
            text-align: center;
            font-size: 25px;
            margin-bottom: 15px;
        }
		
        .form-button{
            text-align: right;
        }

        .field-wrapper{
            position: relative;
            margin-bottom: 15px;
        }
		
        .field-wrapper input{
            border: 1px solid #DADCE0;
            padding: 15px;
            border-radius: 4px;
            width: 100%;
        }

        .field-wrapper .field-placeholder{
            font-size: 16px;
            position: absolute;
            /* background: #fff; */
            bottom: 17px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #80868b;
            left: 8px;
            padding: 0 8px;
            -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
            transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
            z-index: 1;

            text-align: left;
            width: 100%;
        }        
        
        .field-wrapper .field-placeholder span{
            background: #ffffff;
            padding: 0px 8px;
        }

        .field-wrapper input:not([disabled]):focus~.field-placeholder
        {
            color:#1A73E8;
        }
		
        .field-wrapper input:not([disabled]):focus~.field-placeholder,
        .field-wrapper.hasValue input:not([disabled])~.field-placeholder
        {
            -webkit-transform: scale(.75) translateY(-39px) translateX(-60px);
            transform: scale(.75) translateY(-39px) translateX(-60px);
            
        }	

 

To keep placeholder labels in a floating state after user added some text in the field, I have added a keyup even listener using jQuery to add a class, which will keep a placeholder in the floating state.

        $(function () {

            $(".field-wrapper .field-placeholder").on("click", function () {
                $(this).closest(".field-wrapper").find("input").focus();
            });
            $(".field-wrapper input").on("keyup", function () {
                var value = $.trim($(this).val());
                if (value) {
                    $(this).closest(".field-wrapper").addClass("hasValue");
                } else {
                    $(this).closest(".field-wrapper").removeClass("hasValue");
                }
            });

        });

That’s It now you have a form with floating placeholder form fields like Gmail login. See working demo here You can use this anywhere by adding above CSS and jQuery code.