Bootstrap Snippet Animated check and search box using HTML CSS Bootstrap 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="//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-md-6">
        <li class=""><input id="cb1" name="cb1" type="checkbox"><label for="cb1"></label></li>
        <li class=""><input id="cb1" name="cb1" type="checkbox"><label for="cb1"></label></li>
        <li class=""><input id="cb1" name="cb1" type="checkbox"><label for="cb1"></label></li>
        <li class=""><input id="cb1" name="cb1" type="checkbox"><label for="cb1"></label></li>
        </div>
        
        
        <div class="col-md-6">
        <li class=""><input id="cb1" name="cb1" type="radio"><label for="cb1"></label></li>
        <li class=""><input id="cb1" name="cb1" type="radio"><label for="cb1"></label></li>
        <li class=""><input id="cb1" name="cb1" type="radio"><label for="cb1"></label></li>
        <li class=""><input id="cb1" name="cb1" type="radio"><label for="cb1"></label></li>
        </div>
        
        
         <div class="col-md-12">
             <div id="sb-search" class="sb-search " >
             <form>
             <input class="sb-search-input " onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
             <input class="sb-search-submit" type="submit"  value="">
             <span class="sb-icon-search">☌</span>
             </form>
             </div>
         </div>
         <div class="col-md-6">
             
         </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
body{
    margin: 40px 60px;
    background:#fff;
}
li {
    list-style-type:none;
    margin: 0 auto;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type="checkbox"] {
    opacity: 0;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
}
input[type="checkbox"], label::before, input[type="checkbox"]:checked + label::after {
    width: 26px;
    height: 26px;
    top: 50%;
    left: 20px;
    margin-top: -13px;
    position: absolute;
    cursor: pointer;
}
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
   
   //search bsr js
   
   
    function buttonUp(){
         var valux = $('.sb-search-input').val(); 
            valux = $.trim(valux).length;
            if(valux !== 0){
                $('.sb-search-submit').css('z-index','99');
            } else{
                $('.sb-search-input').val(''); 
                $('.sb-search-submit').css('z-index','-999');
            }
    }
    
    $(document).ready(function(){
        var submitIcon = $('.sb-icon-search');
        var submitInput = $('.sb-search-input');
        var searchBox = $('.sb-search');
        var isOpen = false;
        
        $(document).mouseup(function(){
            if(isOpen == true){
            submitInput.val('');
            $('.sb-search-submit').css('z-index','-999');
            submitIcon.click();
            }
        });
        
        submitIcon.mouseup(function(){
            return false;
        });
        
        searchBox.mouseup(function(){
            return false;
        });
                
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated check and search box"
Bootstrap 3.3.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Animated check and search box" Bootstrap 3.3.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Animated check and search box"
Bootstrap 3.3.0 Snippet by sumi9xm