Как правильно сделать боковую иконку поиска?

Question

[Genri_Rus]

Всем здравствуйте !

Хотелось бы сделать примерно вот такой вариант: ссылка

Проблема: при вводе текста в input и убирая курсор -- input исчезает.

Мне нужно сделать так, чтобы input не исчезал, когда я ввёл текст или когда он в фокусе, даже если курсор я навёл на другой элемент.

Вообще как сделать более правильно ?

Comments

[DanKud]

Добавьте:

.search-inside:focus {
    right: 54px;
}

Answer 1

[khomaldi]

Добавьте эти строки в свой код

//если набран текст (соответственно, placeholder не показывается)
.search-inside:not(:placeholder-shown) {
  right: 54px;
}

//если кликнули по input (он в фокусе)
.search-inside:focus {
  right: 54px;
}

Comments

[Genri_Rus]

Спасибо, а вот допустим как сделать такой эффект, чтобы сам инпут выезжал как будто из иконки поиска ?

У меня просто получился такой эффект, как будто он проникает через саму иконку

[Genri_Rus]

Александр Вейнберг, т.е. типа так ?

.search-inside {
	position: absolute;
	top: 0;
	width: 50px;
	right: -200px;
	height: 50px;
	padding: 10px;
	border: 1px solid #000;
	background-color: #fff;
	font-size: 15px;
	transition: 0.3s ease;
}

.search-inner:hover .search-inside {
	right: 54px;
	width: 178px;
	transition: 0.4s ease;
}

[khomaldi]

Genri_Rus,

А вот допустим как сделать такой эффект, чтобы сам инпут выезжал как будто из иконки поиска ?

Похожи вопрос TYT

----------------------------------------------------------
Яндекс -- наше всё. (ну или гугл.. по вкусу)

[Genri_Rus]

khomaldi, еще нужно уметь правильно гуглить )

На самом деле искал множество примеров как на codepen, так и на данном сайте: https://freefrontend.com/css-search-boxes/

Но там также не нашел подходящих примеров для себя (

[khomaldi]

Genri_Rus, когда найдёшь всё, что нужно, тогда отредактируй вопрос и добавь своё решение, чтобы человек, который будет задавать через 20 минут похожий вопрос, хотя бы твой вариант увидел

[Genri_Rus]

Александр Вейнберг, спасибо )
Так уже смотрится более симпатичнее )

Вот: https://codepen.io/Genri_Rus/pen/VRVGvB

[Genri_Rus]

khomaldi, уже добавил )