Form with floating labels

      No Comments on Form with floating labels

Form with floating labels

Form with floating labels

Building Labels

<div>
    <form class="modal_form_login">
       <div style="position: relative;">
             <input name="pe" required />
            <span  class="float_label">PHONE/EMAIL</span>
       </div>
         <div style="position: relative;">
              <input  name="p" type="password" class="password" required />
              <span  class="float_label">PASSWORD</span>  
         </div>
        <button type="submit">Login</button>
         <a href="#" class="forgot_link">Forgot Password?</a>
     </form>
</div>

Adding style

.modal_form_login input
{
    border:solid 1px lightgray;
    height:40px;
    margin:0px;padding-top:10px;
    color:#666;width:80%;
}

.modal_form_login input:focus
{
    border:solid 1px #2b3f66;
}
.modal_form_login button
{
    width:80%;
    background-color: #2b3f66;
    color:#fff;
    border:solid 1px #2b3f66;
    padding:10px;
    margin:10px 0px;
}
.forgot_link
{
    color:#000;margin:10px 0px;
}
.forgot_link:hover
{
    color:#ffcc00;
}
.float_label
{
 position: absolute;
  margin: 0px 10px;
  bottom:10px;  
  left:9%;
    transition: 0.5s ease all; 
    pointer-events: none;
    color:#ccc;
}
.modal_form_login input:focus ~ .float_label,.modal_form_login input:valid ~ .float_label{
  color:#2b3f66;
  top: 2px;font-size:10px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *