Bootstrap Snippet materialize like input using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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="container">
    <div class="row">
        <h2>Material design input.</h2>
        <div class="mat-input">
                <div class="mat-input-outer">
                    <input type="text" autocomplete="off"/>
                    <label class="">Enter your Name</label>
                    <div class="border"></div>
                </div>            
            </div>
    </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
/*MATERIAL INPUT*/
h2{
    font-family:calibri;
    color:purple;
    text-align:center;
}
.mat-input{
    margin: 2% auto;
    width: 50%;    
}
.mat-input-outer{
    display: table;
    width: 100%;
    position: relative;
}
.mat-input-outer input{
    height: 50px;
    border-radius: 0;
    border: none;
    width: 100%;    
    padding: 0 15px;
    font-family: calibri;
    font-size: 20px;
    font-style: italic;
}
.mat-input-outer label{
    font-family: calibri;
    font-size: 20px;
    left: 15px;
    position: absolute;
    top: 18px;
    font-style: italic;
    transition: .2s;
    color: #000;
    cursor: text;
    font-weight: normal;
    opacity: 0.4;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function () {
                $('.mat-input-outer label').click(function () {
                    $(this).prev('input').focus();
                });
                $('.mat-input-outer input').focusin(function () {
                    $(this).next('label').addClass('active');
                });
                $('.mat-input-outer input').focusout(function () {
                    if (!$(this).val()) {
                        $(this).next('label').removeClass('active');
                    } else {
                        $(this).next('label').addClass('active');
                    }
                });
            });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"materialize like input"
Bootstrap 3.0.0 Snippet by ashum499

Related: See More

Questions / Comments:

"materialize like input" Bootstrap 3.0.0 Snippet by ashum499

Related: See More

Questions / Comments:

"materialize like input"
Bootstrap 3.0.0 Snippet by ashum499