<section id="hero">
  <div class="container">
    <div class="searchwrapper">
      <div class="searchbox">
        <div class="row">
          <div class="col-md-5"><input type="text" class="form-control" placeholder="Search by Keywords..."></div>
          <div class="col-md-3"><input type="text" class="form-control" placeholder="Location"></div>
          <div class="col-md-3">
            <select class="form-control category">
              <option>Category</option>
              <option>Hotels</option>
              <option>Cafes</option>
              <option>Nightlife</option>
              <option>Restauarants</option>
            </select>
          </div>
          <div class="col-md-1"><input type="button" class="btn btn-primary" class="form-control" value="Search"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<footer>
  <div class="container">
    <p class="text-center">Designed by <a href="https://www.linkedin.com/in/prince-sargbah-b0155479" target="_blank">Prince J. Sargbah</a> | Thank you for viewing this</p>
  </div>
</footer>
body {
  background-color: rgba(0,0,0,0.9);
  background-image: url(https://static.pexels.com/photos/60015/cinque-terre-italy-rocks-sea-60015.jpeg);
  background-size:cover;
  background-position:center 30%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#hero { 
  background-color:rgba(0,0,0,0.5); 
  overflow:hidden; 
}
.searchwrapper {
  width: 90%;
  margin: 25% auto;
}
.searchbox {
  background-color:#fff;
  padding: 10px 76px 10px 40px;
  border-radius: 50px;
}
.searchbox [class*="col-"] {
  padding: 0px;
}
.searchbox .col-md-5, .searchbox .col-md-3 { 
  padding-top: 12px; 
  padding-bottom: 12px;
}
.searchbox .form-control {
  border-color: transparent;
  border-right:solid 1px rgba(0,0,0,0.10);
}
.searchbox select.form-control {
  border-right:solid 1px transparent;
}
.searchbox .form-control:focus {
  outline: 0;
}
.searchbox .btn { border-radius:40px; padding:20px 40px; }

/* ------ Select Chosen Styles ---- */
.searchbox .chosen-single,
.searchbox .chosen-container-multi .chosen-choices li.search-field input[type="text"],
.searchbox .chosen-container-single .chosen-single {
	padding: 0 28px;
	width: 100% !important;
	margin: 0;
	border: solid 1px #c4cad0 !important;
	height: 40px;
	line-height: 22px;
	font-size: 14px;
	font-weight: normal;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-radius: 23px;
	background: none;
}

.searchbox .chosen-single,
.searchbox .chosen-container-multi .chosen-choices li.search-field input[type="text"],
.searchbox .chosen-container-single .chosen-single {
	font-size: 15px;
}

.searchbox .chosen-single,
.searchbox .chosen-container-multi .chosen-choices li.search-field input[type="text"],
.searchbox .chosen-container-single .chosen-single {
	border: none !important;
	background: #fff !important;
}

.searchbox .chosen-container-multi .chosen-choices {
	background: none;
}

.searchbox .chosen-container-multi .chosen-choices li.search-field {
	float: none;
}

.searchbox .chosen-single,
.searchbox .chosen-container-single .chosen-single,
.searchbox .chosen-container-multi .chosen-choices li.search-field input[type="text"]{
	padding-right: 50px;
}

.searchbox .chosen-single span {
	display: block;
	padding: 0;
	margin: 0;
	line-height: 40px;
}

.searchbox .chosen-container-single .chosen-single {
	background: none !important;
	box-shadow: none !important;
}

.searchbox .chosen-container-active .chosen-single,
.searchbox .chosen-container-active .chosen-choices {
	box-shadow: none;
}

.searchbox .chosen-single,
.searchbox .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
	 color: #334e6f !important;
}

.searchbox .chosen-container-multi .chosen-choices li.search-field input[type="text"],
.main_wrapper .select-tags:after {
	color: #fff !important;
}

.searchbox .chosen-container {
	text-align: left;
}

.searchbox .chosen-drop {
	margin: 5px 0 0 0;
	background: #fff;
	border-radius: 5px;
	border: none;
	overflow: hidden;
	box-shadow: 20px 20px 50px rgba(58, 87, 135, 0.1);
}

.searchbox .chosen-drop ul.chosen-results {
	padding: 0;
	margin: 0;
	text-align: left;
}

.searchbox .chosen-drop ul.chosen-results li:before {
	display: none;
}

.searchbox .chosen-drop ul.chosen-results li {
	padding: 6px 30px 7px 30px;
	line-height: 22px;
	font-size: 14px;
	color: #334e6f;
	background: none !important;
}

.searchbox .chosen-drop ul.chosen-results li:first-child {
	padding-top: 25px;
}

.searchbox .chosen-drop ul.chosen-results li:last-child {
	padding-bottom: 23px;
}

.searchbox .chosen-choices {
	padding: 0;
	margin: 0;
	border: none;
}

.searchbox .chosen-choices li {
	width: 100%;
	display: block;
}

.searchbox .chosen-choices li.search-choice {
	display: none;
}

.searchbox .chosen-choices li:before,
.searchbox .chosen-choices li:after {
	display: none;
}

.searchbox .chosen-single > div {
	display: none;
}

.searchbox .chosen-single {
	position: relative;
}

.searchbox .chosen-single:after {
	content: "\f107";
	right: 28px;
	top: 50%;
	width: auto;
	height: auto;
	background: none;
	font-family:'FontAwesome';
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	color: #999999;
	display: block;
	pointer-events: none;
	position: absolute;
	font-size: 28px;
	line-height: 22px;
}
/* ------ End Select Chosen Styles ---- */

footer {
  background-color:#fff;
  padding: 3% 0px;
}
footer p { color:#999; }
@media (max-width:767px) {
  .searchbox .btn { width:100%; }
  .searchbox {
    padding: 20px 40px;
  }
.searchbox .form-control {
  border-color: transparent;
  border-bottom:solid 1px rgba(0,0,0,0.10);
}
.searchbox select.form-control {
  border-bottom:solid 1px transparent;
}
}
$(".category").chosen({disable_search_threshold: 10});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
  3. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
  4. https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.js