Why does the search collapse when clicking on the "submit" button?

Question

css

It is necessary that when you click on the icon when the search is expanded, the page is reloaded, as well as when you press enter. As I understand it, no matter where you click, first the input is removed from focus. How to solve this, please tell me.
https://codepen.io/satoshi-r/pen/QWLPMXz

Answer 1

You have a layer overlap, the input overlaps the button, it is better to do such things on js, and not using css.