.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);
    }