<form class="csb-filter" role="search">
  <label class="csb-sr" for="csb-filter-i">Search</label>
  <input id="csb-filter-i" type="search" name="q" placeholder="Search products..." />
  <label class="csb-sr" for="csb-filter-s">Category</label>
  <select id="csb-filter-s" name="cat">
    <option>All</option>
    <option>Components</option>
    <option>Tools</option>
    <option>Generators</option>
  </select>
</form>

.csb-filter {
  display: inline-flex; align-items: stretch;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-filter:focus-within { border-color: #7c6cff; }
.csb-filter input {
  flex: 1; padding: 11px 14px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  min-width: 200px;
}
.csb-filter input::placeholder { color: #b8b6d4; }
.csb-filter select {
  padding: 11px 14px;
  border: 0; border-left: 1px solid rgba(255,255,255,0.08);
  outline: none; cursor: pointer;
  background: transparent;
  color: #a78bfa; font: 600 12px/1 system-ui, sans-serif;
  appearance: none; -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23a78bfa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}