"dropdown select"
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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4 "> <label class="form-control-label" for="">Time</label> <div class="dropdown-select warning"> <a class="select">1 Hour 15 Minutes</a> <div class="search-box"> <i class="fa fa-search"></i> <input type="text" placeholder="Search" class="seach-control" /> </div> <ul class="option-list"> <li><a href="JavaScript:Void(0);">15 Minutes </a></li> <li><a href="JavaScript:Void(0);">30 Minutes</a></li> <li><a href="JavaScript:Void(0);">45 Minutes</a></li> <li><a href="JavaScript:Void(0);">1 Hour</a></li> <li><a href="JavaScript:Void(0);">1 Hour 15 Minutes</a></li> <li><a href="JavaScript:Void(0);">1 Hour 30 Minutes</a></li> <li><a href="JavaScript:Void(0);">1 Hour 45 Minutes</a></li> <li><a href="JavaScript:Void(0);">2 Hour</a></li> <li><a href="JavaScript:Void(0);">2 Hour 15 Minutes</a></li> <li><a href="JavaScript:Void(0);">2 Hour 30 Minutes</a></li> <li><a href="JavaScript:Void(0);">2 Hour 45 Minutes</a></li> <li><a href="JavaScript:Void(0);">3 Hour</a></li> <li><a href="JavaScript:Void(0);">3 Hour 15 Minutes</a></li> <li><a href="JavaScript:Void(0);">3 Hour 30 Minutes</a></li> <li><a href="JavaScript:Void(0);">3 Hour 45 Minutes</a></li> <li><a href="JavaScript:Void(0);">3 Hour</a></li> </ul> </div> </div> </div> </div> <script> $(document).on('click', function(event) { if (!$(event.target).closest('.dropdown-select').length) { $('.option-list, .search-box').hide(); } }); $('.select').click(function(event) { //$('.option-list, .search-box').hide(); $(this).closest('.dropdown-select').find('.option-list, .search-box').toggle(); $('.option-list a').click(function(){ var select = $(this).text(); $(this).closest('.dropdown-select').children('.select').text(select); $('.option-list, .search-box').hide(); }); }); //Search $('.seach-control').keyup(function(){ var val = $(this).val().toLowerCase(); var list = $(this).closest('.dropdown-select').find('li') list.each(function() { var text = $(this).text().toLowerCase(); if(text.indexOf(val)==-1) { $(this).hide(); } else { $(this).show(); } }) }); </script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
body{ background-color: #f8fbfd; } /*=====================================*/ .search-box{ box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); } .dropdown-select { position: relative; display: inline-block; text-align: left; width: 100%; box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); } .dropdown-select .select { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.42857; margin-bottom: 0; padding: 11px 35px 11px 12px; vertical-align: middle; white-space: nowrap; position: relative; } .dropdown-select .select:after { content: ''; position: absolute; border: 5px solid transparent; border-top: 5px solid #555; top: 14px; right: 10px; } .dropdown-select .select:before { content: ''; position: absolute; width: 1px; background: #ddd; top: 0; bottom: 0; right: 30px; } .dropdown-select .option-list { background-color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.17); box-shadow: 0 5px 7px rgba(0, 0, 0, 0.17); font-size: 14px; left: 0; list-style: none; margin: 2px 0 0; max-height: 220px; overflow-y: auto; padding: 5px 0; position: absolute; top: 107px; z-index: 100; width:100%; display: none; } .dropdown-select .option-list a { clear: both; color: #8898aa; display: block; line-height: 2; padding: 3px 20px; white-space: nowrap; text-decoration: none; } .dropdown-select .search-box { position: absolute; left: 0; top: 100%; display: inline-block; width: 100%; display: none; background-color: #eaf0f6; padding: 12px; /* position: relative; */ } .search-box .fa{ position: absolute; right: 33px; top: 29px; z-index: 9; color:#8898aa; font-size: 16px; } .dropdown-select .search-box + .option-list { margin-top: 0px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0; border-radius: 0 0 4px 4px; border-top: none; } .dropdown-select .seach-control { width: 100%; height: 38px; border: 1px solid #dae1ec; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px; border-radius: 4px 4px 0 0; margin-top: 5px; padding: 5px 5px 5px 30px; } .dropdown-select .search-icon { position: absolute; width: 13px; height: 13px; border: 2px solid #ccc; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; display: inline-block; left: 10px; z-index: 2; top: 12px; } .dropdown-select .search-icon:after { content: ''; width: 3px; height: 7px; background: #ccc; position: absolute; top: 7px; left: -3px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .warning .select { background: #ffffff; color: #8898aa;; width: 100%; } .warning .select:after { border-top-color: #8898aa; } .warning .select:before { background: transparent; } .warning .search-icon { border-color: #fff; } .warning .search-icon:after { background: #fff; } .warning .option-list a:hover { background: #e5f5f8; } .search-box input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #8898aa; } .search-box input::-moz-placeholder { /* Firefox 19+ */ color: #8898aa; } .search-box input:-ms-input-placeholder { /* IE 10+ */ color: #8898aa; } .search-box input:-moz-placeholder { /* Firefox 18- */ color: #8898aa; }

Related: See More


Questions / Comments: