Bootstrap Snippet Float label simple using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="container">
    <div class="row">
        <h2>Float Label CSS</h2>
        
        <form  role="form">
            <div class="form-group bs-float-label">
                <input id="float-input-1" type="text" class="form-control float-input" placeholder="Start Typing"/>
                <label for="float-input-1" class="float-label">Label</label>
            </div>
            
        </form>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {padding:20px;}
.bs-float-label {
    position:relative;
    border:1px solid #ddd;
    margin:10px;
    padding:10px;
}
.bs-float-label > .float-input {margin-top:10px;}
.bs-float-label > .float-input:focus {
  /*border-color: #f06d06;*/
}
.bs-float-label > .float-label {
    position:absolute; 
    top:3px; 
    left:10px; 
    background:rgba(255, 255, 255, .32); 
    -webkit-transition: top .5s ease-in-out, opacity .5s ease-in-out; /* For Safari 3.1 to 6.0 */
    transition: top .5s ease-in-out, opacity .5s ease-in-out;
    opacity:0;
}
.bs-float-label > .float-label.show { color:#333; top:1px; opacity:1; }
.bs-float-label > .float-label.on { color:blue; }
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
$(document).ready(function(e){
if($('.bs-float-label input').length){
    var bs_float_on_class = "on";
    var bs_float_show_class = "show";
    
    $('.float-input').on('bs-check-value', function(){
        var _bs_label = $(this).closest('.bs-float-label').find('.float-label');
        if (this.value !== ''){
            _bs_label.addClass(bs_float_show_class);
        } else {
            _bs_label.removeClass(bs_float_show_class);
        }
    })
    .on("keyup",function(){
        $(this).trigger("bs-check-value");
    })
    .on("focus",function(){
        $(this).closest(".bs-float-label").find('.float-label').addClass(bs_float_on_class);
    })
    .on("blur",function(){
        $(this).closest(".bs-float-label").find('.float-label').removeClass(bs_float_on_class);
    }).trigger("bs-check-value");
    ;
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Float label simple"
Bootstrap 3.1.0 Snippet by alilishan

Related: See More

Questions / Comments:

"Float label simple" Bootstrap 3.1.0 Snippet by alilishan

Related: See More

Questions / Comments:

"Float label simple"
Bootstrap 3.1.0 Snippet by alilishan