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

Question

Genri_Rus @Genri_Rus

CSS

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

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

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

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

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

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

Вопрос задан более трёх лет назад
113 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

DanKud @DanKud
Добавьте:
.search-inside:focus { right: 54px; }
Написано более трёх лет назад

Решения вопроса 1

7 комментариев

Genri_Rus @Genri_Rus Автор вопроса

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

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

Написано более трёх лет назад

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 @khomaldi

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

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

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

Написано более трёх лет назад
Genri_Rus @Genri_Rus Автор вопроса

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

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

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

Написано более трёх лет назад
khomaldi @khomaldi

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

Написано более трёх лет назад
Genri_Rus @Genri_Rus Автор вопроса

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

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

Написано более трёх лет назад
Genri_Rus @Genri_Rus Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 6 часов назад
- 46 просмотров
1

ответ
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- 6 часов назад
- 119 просмотров
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 59 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- вчера
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 85 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 23 апр.
- 86 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 апр.
- 709 просмотров
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- 23 апр.
- 2317 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Обучение моделированию процесса дуговой наплавки в CAE

25 апр. 2024, в 18:14

1500 руб./в час

Реализовать форму регистрации и авторизации на React

25 апр. 2024, в 18:13

1000 руб./за проект

Настроить и запустить email кампанию на Gmail

25 апр. 2024, в 17:54

30000 руб./за проект

Answer 1 · 2019-03-22 00:46:12

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

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

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт