<input type="search" name="q"> даёт кнопку очистки в WebKit и семантику поля поиска; оберните в <search> или landmark role="search".
На сервере обрабатывайте GET ?q= — индексируемые URL результатов с canonical при дублях.
- [<input type="search"> — MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search) — Поисковое поле.
- [<search> — MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search) — Landmark поиска.
---
## Стили
-webkit-appearance: none снимает системный стиль, если нужен кастом из UI-kit.