Bootstrap Snippet Floating label css using HTML CSS Bootstrap Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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>Floating label css</h2>
    </div>
    
    <div class="col-md-5 col-md-offset-1">
        <form role="form"  id="floating-label">
        
            <div class="form-group">
                <label class="control-label">First Name</label>
                <input type="text" class="form-control" />
            </div>
            <div class="form-group">
                <label class="control-label">Last Name</label>
                <input type="text" class="form-control"/>
            </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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{margin-top:20px;}
#floating-label .form-group {
                                        display: flex;
                                        height: 55px;
                                    }
                                    #floating-label .control-label {
                                        font-size: 16px;
                                        font-weight: 400;
                                        opacity: 0.4;
                                        pointer-events: none;
                                        position: absolute;
                                        transform: translate3d(6px, 22px, 0) scale(1);
                                        transform-origin: left top;
                                        transition: 240ms;
                                    }
                                    #floating-label .form-group.focused .control-label {
                                        opacity: 1;
                                        transform: scale(0.75);
                                    }
                                    #floating-label .form-control {
                                        align-self: flex-end;
                                    }
                                    #floating-label .form-control::-webkit-input-placeholder {
                                        color: transparent;
                                        transition: 240ms;
                                    }
                                    #floating-label .form-control:focus::-webkit-input-placeholder {
                                        transition: none;
                                    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
$('.form-control').on('focus blur', function (e) {
        $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
    }).trigger('blur');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Floating label css"
Bootstrap 3.3.0 Snippet by srinutest

Related: See More

Questions / Comments:

"Floating label css" Bootstrap 3.3.0 Snippet by srinutest

Related: See More

Questions / Comments:

"Floating label css"
Bootstrap 3.3.0 Snippet by srinutest