HTML and CSS

Search bar with categories

HTML

<div class="container demo-container">
 <form onsubmit="alert('Demo');return false" class="d-flex flex-sm-row flex-column align-items-center justify-content-center">
  <select class="form-select demo-form-select">
   <option value="title">Title</option>
   <option value="content">Content</option>
   <option value="notes">Notes</option>
  </select>
 <input name="search" class="form-control me-1 shadow-none search-input" autocomplete="off" type="search" placeholder="Search" aria-label="Search">
 <button type="submit" class="btn btn-warning btn-search"> &nbsp; Search</button>
 </form>
</div>

CSS

.demo-container {
  margin: 4em auto;
  max-width: 600px;
}

.demo-container .btn-search {
  margin-left: -20px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.demo-container .btn-search::before {
  content: "\f002";
  font-family: FontAwesome;
  color: #FFFFFF;
  float: left;
}

.demo-container .search-input {
  padding-right: 40px;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  width: 300px;
  outline: none !important;
  outline: 0 !important;
}

.demo-container .form-select {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  width: 120px;
  background-color: #F0F0F0;
  outline: none !important;
  outline: 0 !important;
}

.demo-container textarea:focus,
.demo-container input[type="search"]:focus,
.demo-container input[type="submit"]:focus,
.demo-container .form-select:focus,
.demo-container .btn:focus {
  border-color: rgba(208, 212, 218, 0.9);
  box-shadow: none !important;
  outline: 0 none !important;
}

@media only screen and (max-width: 600px) {
.demo-container .form-select {
  width: 100%;
  margin-bottom: 1em;
}

.demo-container .btn-search {
  margin-left: 0;
  margin-top: 1em;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  width: 100%;
}

.demo-container .search-input {
  padding-right: 0;
  border-right: 1px solid rgba(208, 212, 218, 0.9);
  border-left: 1px solid rgba(208, 212, 218, 0.9);
  border-radius: 4px;
  width: 100%;
  outline: none !important;
  outline: 0 !important;
}
}