<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 ----------> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <div class="container"> <section class="row"> <h2>Busca de imóveis para bootstrap</h2> </section> </div> <div class="container buscar"> <section class="row"> <div class="col-md-4 esquerda"> <h3>Localize seu <br><span class="up">Imóvel</span></h3> </div> <div class="col-md-8 direita"> <form action="" method="get" style="padding-top: 20px"> <div class="form-group col-md-4"> <label>Finalidade</label> <a class="btn btn-primary btn-select btn-select-light"> <input type="hidden" class="btn-select-input" id="" name="" value="teste" /> <span class="btn-select-value">Select an Item</span> <i class='btn-select-arrow fa fa-suitcase'></i> <ul> <li>Comprar</li> <li class="selected">Alugar</li> </ul> </a> </div> <div class="form-group col-md-4"> <label>Tipo</label> <a class="btn btn-primary btn-select btn-select-light"> <input type="hidden" class="btn-select-input" id="" name="" value="" /> <span class="btn-select-value">Select an Item</span> <i class='btn-select-arrow fa fa-home'></i> <ul> <li>Apartamento Padrão</li> <li>Apartamento Kitnet</li> <li>Apartamento Cobertura</li> <li>Apartamento Loft</li> <li>Apartamento Penthouse</li> <li>Apartamento Flat</li> <li>Apartamento Sala Living</li> <li>Apartamento Cobertura Duplex</li> <li>Apartamento Cobertura Triplex</li> <li class="selected">Casa Padrão</li> <li>Casa Sobrado</li> <li>Casa Térrea</li> <li>Casa Sobreposta Alta</li> <li>Casa Sobreposta Baixa</li> <li>Casa Edícula</li> <li>Comércio Barracão</li> <li>Comércio Conjuntos</li> <li>Comércio Consultório</li> <li>Comércio Escola</li> <li>Comércio Galeria</li> <li>Comércio Galpão</li> <li>Comércio Hotel</li> <li>Comércio Lanchonete</li> <li>Comércio Minimercado</li> <li>Comércio Padaria</li> <li>Comércio Predio</li> <li>Comércio Quiosque</li> <li>Comércio Restaurante</li> <li>Comércio Sala</li> <li>Comércio Salão</li> <li>Comércio Sobreloja</li> <li>Comércio Supermercado</li> <li>Terreno Padrão</li> <li>Rural Fazenda</li> <li>Rural Chacara</li> <li>Rural Haras</li> <li>Rural Rancho</li> <li>Rural Sitio</li> <li>Rural Terreno</li> <li>Industria Terreno</li> <li>Industria Galpão</li> <li>Industria Prédio</li> </ul> </a> </div> <div class="form-group col-md-4"> <label>Localização</label> <a class="btn btn-primary btn-select btn-select-light"> <input type="hidden" class="btn-select-input" id="" name="" value="" /> <span class="btn-select-value">Select an Item</span> <i class='btn-select-arrow fa fa-map-o'></i> <ul> <li class="selected">São Paulo</li> </ul> </a> </div> <button type="submit" class="botao-buscar"><span class="glyphicon glyphicon-search"></span> Buscar</button> </form> </div> </section> </div>

.buscar{ background: #195B7D none repeat scroll 0 0; min-height: 200px; } .buscar h3{ color: #fff; font-weight: 400; font-family: 'montserrat'; text-transform: uppercase; text-align: center; } .buscar .up{ color: #fff; font-weight: 900; font-family: 'montserrat'; text-transform: uppercase; white-space: pre; font-size: 48px; } .buscar label{ color: #fff; font-family: 'montserrat'; font-size: 10px; float: right; } .esquerda{ background: #95c41f none repeat scroll 0 0; min-height: 200px; line-height:0; } .custom__select { border: none; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .btn-select { position: relative; padding: 0; min-width: 236px; width: 100%; border-radius: 0; margin-bottom: 20px; } .btn-select .btn-select-value { padding: 6px 12px; display: block; position: absolute; left: 0; right: 34px; text-align: left; text-overflow: ellipsis; overflow: hidden; border-top: none !important; border-bottom: none !important; border-left: none !important; } .btn-select .btn-select-arrow { background: #95c41f; float: right; line-height: 20px; padding: 6px 10px; top: 0; } .btn-select ul { display: none; background-color: white; color: black; clear: both; list-style: none; padding: 0; margin: 0; border-top: none !important; position: absolute; left: -1px; right: -1px; top: 33px; z-index: 999; } .btn-select ul li { padding: 3px 6px; text-align: left; } .btn-select ul li:hover { background-color: #f4f4f4; } .btn-select ul li.selected { color: white; } /* Default Start */ .btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active { border-color: #ccc; } .btn-select.btn-default ul li.selected { background-color: #ccc; } .btn-select.btn-default ul, .btn-select.btn-default .btn-select-value { background-color: white; border: #ccc 1px solid; } .btn-select.btn-default:hover, .btn-select.btn-default.active { background-color: #e6e6e6; } /* Default End */ /* Primary Start */ .btn-select.btn-primary:hover, .btn-select.btn-primary:active, .btn-select.btn-primary.active { border-color: #286090; } .btn-select.btn-primary ul li.selected { background-color: #2e6da4; color: white; } .btn-select.btn-primary ul { border: #2e6da4 1px solid; } .btn-select.btn-primary .btn-select-value { background-color: #428bca; border: #2e6da4 1px solid; } .btn-select.btn-primary:hover, .btn-select.btn-primary.active { background-color: #286090; } /* Primary End */ .btn-select.btn-select-light .btn-select-value { background-color: white; color: black; } .botao-buscar{ float: right; background: #95c41f none repeat scroll 0 0; border: 1px solid #95c41f; color: #fff; display: inline-block; font-size: 14px; padding: 5px 18px; text-align: center; }

$(document).ready(function () { $(".btn-select").each(function (e) { var value = $(this).find("ul li.selected").html(); if (value != undefined) { $(this).find(".btn-select-input").val(value); $(this).find(".btn-select-value").html(value); } }); }); $(document).on('click', '.btn-select', function (e) { e.preventDefault(); var ul = $(this).find("ul"); if ($(this).hasClass("active")) { if (ul.find("li").is(e.target)) { var target = $(e.target); target.addClass("selected").siblings().removeClass("selected"); var value = target.html(); $(this).find(".btn-select-input").val(value); $(this).find(".btn-select-value").html(value); } ul.hide(); $(this).removeClass("active"); } else { $('.btn-select').not(this).each(function () { $(this).removeClass("active").find("ul").hide(); }); ul.slideDown(300); $(this).addClass("active"); } }); $(document).on('click', function (e) { var target = $(e.target).closest(".btn-select"); if (!target.length) { $(".btn-select").removeClass("active").find("ul").hide(); } });