<form class="csb-min" role="search">
  <label class="csb-sr" for="csb-min-i">Search</label>
  <input id="csb-min-i" type="search" name="q" placeholder="Search anything..." />
</form>

.csb-min { position: relative; display: inline-block; }
.csb-min input {
  width: 240px; padding: 8px 0;
  border: 0; outline: none;
  background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  border-bottom: 1px solid #2a2a3e;
}
.csb-min input::placeholder { color: #b8b6d4; }
.csb-min::after {
  content: ''; position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: #7c6cff;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.csb-min:focus-within::after { width: 100%; }

.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;
}