Bootstrap Snippet Expandable Search Css effect using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-black">
            <div class="row">
                <div class="col-lg-3 col-md-3 pull-right">
                    <div class="">
                        <div class="custom-search">
                            <input type="text" class="form-control" placeholder="search...">
                        </div>
                    </div>
                </div>
            </div>              
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.custom-search input {
    background: rgba(255, 255, 255, 1) url("https://image.flaticon.com/icons/svg/126/126474.svg") no-repeat scroll right center / 30px 18px;
    padding-right: 20px;
    transition: all 0.5s ease 0s;
    width: 30px;
    float:right;
}
.custom-search input:focus {
    width: 100%;
}
.bg-black {
    background: #999 none repeat scroll 0 0;
    display: inline-block;
    padding: 3% 2%;
    width: 100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Expandable Search Css effect"
Bootstrap 3.3.0 Snippet by annilshinde

Related: See More

Questions / Comments:

"Expandable Search Css effect" Bootstrap 3.3.0 Snippet by annilshinde

Related: See More

Questions / Comments:

"Expandable Search Css effect"
Bootstrap 3.3.0 Snippet by annilshinde