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

<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>
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; } input[type="checkbox"], input[type="checkbox"] { box-sizing: border-box; padding: 0; } label { display: inline-block; width: 100%; position: relative; font-size: 1.2em; padding: 15px 10px 15px 80px; vertical-align: top; cursor: pointer; } label::before { content: ''; border: 2px solid rgba(0,0,0,0.3); } input[type="checkbox"]:checked + label::after { content: '\2713'; text-align: center; line-height: 28px; color: #31d2d4; } 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; } /*INPUT TYPE RADIO*/ input[type="radio"] { opacity: 0; -webkit-appearance: none; display: inline-block; vertical-align: middle; z-index: 100; } input[type="radio"], label::before, input[type="radio"]:checked + label::after { width: 26px; height: 26px; top: 50%; left: 20px; margin-top: -13px; position: absolute; cursor: pointer; } input[type="radio"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="radio"]:checked + label::after { content: '\2713'; text-align: center; line-height: 28px; color: #31d2d4; } input[type="radio"], label::before, input[type="radio"]:checked + label::after { width: 26px; height: 26px; top: 50%; left: 20px; margin-top: -13px; position: absolute; cursor: pointer; } /*==================================search bsr css*/ .sb-search { position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; } .sb-search-input { position: absolute; top: 0; right: 0px; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: #2c3e50; } input[type="search"].sb-search-input { -webkit-appearance: none; -webkit-border-radius: 0px; } .sb-search-input::-webkit-input-placeholder { color: #efb480; } .sb-search-input:-moz-placeholder { color: #efb480; } .sb-search-input::-moz-placeholder { color: #efb480; } .sb-search-input:-ms-input-placeholder { color: #efb480; } .sb-icon-search, .sb-search-submit { width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px; text-align: center; cursor: pointer; } .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; color:red; border: none; outline: none; z-index: -1; } .sb-icon-search { color: #fff; background: #e67e22; z-index: 90; font-size: 22px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .sb-icon-search:before { content: ""; } .sb-search.sb-search-open, .no-js .sb-search { width: 100%; } .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background: #da6d0d; color: #fff; z-index: 11; } .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { /* z-index: 90;*/ }
//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; }); submitIcon.click(function(){ if(isOpen == false){ searchBox.addClass('sb-search-open'); isOpen = true; } else { searchBox.removeClass('sb-search-open'); isOpen = false; } }); });

Related: See More


Questions / Comments: