UI-паттерны из Uiverse (Galaxy) — Поиск без JavaScript

<form class="sb">
  <input class="sb__in" type="search" name="q" required autocomplete="off" aria-label="Поиск">
  <button type="submit" class="sb__btn">⌕</button>
</form>
<style>
.sb { display: flex; max-width: 24rem; margin: 1rem auto; }
.sb__in, .sb__btn { height: 3rem; transition: all 0.25s ease; }
.sb__in {
  width: 3rem; border: none; border-radius: 1.5rem;
  box-shadow: inset 0 0 0 2px #333; padding: 0 0.75rem;
}
.sb__in:focus, .sb__in:valid {
  width: 100%; background: #fff; border-radius: 0.375rem 0 0 0.375rem;
  box-shadow: inset 0 0 0 1px #ccc;
}
.sb__btn {
  width: 3rem; border: none; border-radius: 0 0.75rem 0.75rem 0;
  background: #333; color: #fff; cursor: pointer;
}
.sb__in:focus + .sb__btn, .sb__in:valid + .sb__btn {
  width: auto; padding: 0 1rem; border-radius: 0 0.375rem 0.375rem 0;
}
</style>