Bootstrap Snippet Form Login Label and Input together using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="modal  fade" id="login-modal"  >
<form id="loginform" class="form-horizontal" role="form">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header ">
            <h4 class="modal-title " id="myModalLabel"><span class="glyphicon glyphicon-lock"></span> ACCESS PANEL</h4>
        </div>
        <div class="modal-body">
            <div id="login">
                <section class="login_content" >
                        <div class="input-bx">
                         <label for="form_user">E-mail</label>
                            <input id="form_user" name="form_user" type="text" class="form-control" required="" />
                        </div>                        
                        <div class="input-bx">
                         <label for="form_pass">Password</label>
                            <input id="form_pass" name="form_pass"   type="password" class="form-control" required="" />
                        </div>
                </section>
            </div>
        </div><!-- /.modal-body -->
        <div class="modal-footer">
            <div   class="text-info " id="sendpass">Send me password, please</div>
                <button type="button" id="register" class="btn btn-primary"><span class="glyphicon glyphicon-hand-right"></span> Register</button>
                <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Acessar</button>
        </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</form><!-- form -->
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.input-bx label {  
      position: relative;
      display: inline;
      top: 25px;
      padding-left: 10px;
      color: #8D8D7B;  
      font-weight: normal;
}
.input-bx input{
  padding-left: 10px;
  padding-top: 20px;
}
.input-bx input:focus{
  height: 60px;
}
.input-bx-focus{
      border: 1px solid green;
      background-color: rgb(250, 255, 189);
    -webkit-box-shadow: 1px;
    -moz-box-shadow: 1px;
    box-shadow: 1px;
    padding: 3px;
    padding-left: 10px;
}
.input-bx-focus-out-true{
  height: 60px;
}
 
.input-bx-focus-out-false{
  height: 30px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
    $(".input-bx").on('focus', 'input',function(){
        $('label[for='+$(this).attr('id')+']').addClass('input-bx-label');
        $(".input-bx input").addClass('input-bx-focus');
    });
    $(".input-bx input").on('blur',function(){
      if($(this).val()!=""){
        $(this)
          .addClass('input-bx-focus-out-true')
          .removeClass('input-bx-focus-out-false');
      }else{
        $(this)
          .addClass('input-bx-focus-out-false')
          .removeClass('input-bx-focus-out-true');
      }
    });
$('#login-modal').modal('show');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Form Login Label and Input together "
Bootstrap 3.0.0 Snippet by ricardorodh

Related: See More

Questions / Comments:

"Form Login Label and Input together " Bootstrap 3.0.0 Snippet by ricardorodh

Related: See More

Questions / Comments:

"Form Login Label and Input together "
Bootstrap 3.0.0 Snippet by ricardorodh