Как сделать замену z-index при focus-within?

Question

[WebforSelf]

Друзья , есть поиск который при клике должен выезжать
а уже когда в поиск введено значение то клик на круг уже отправляет запрос.

Суть такая. По началу блок должен быть слоем ниже, для этого использую z-index . хочу чтоб при клике форме присваивалось focus-within и менялся z-index чтоб инпут поиска поднимался наверх по слоям.

Сейчас при клике сразу срабатывает поиск,

https://jsfiddle.net/4gcyk1zn

Answer 1

[sergski]

Ну да, при клике по кнопке вы отправляете форму, css вам в этом не поможет. Напишите небольшой скрипт, в котором берется value из поля ввода и если оно пустое, то выводите поле поиска, иначе сабмит формы.

Comments

[WebforSelf]

ну почему же не поможет, идея есть. Реализация хромает.
Вот в принципе и нашел похожий пример.

jsfiddle.net/f2t0anzw