@Vald3r

Не подключается свг?

нужно в левой части плейсхолдера разместить svg иконку поиска, меняющую opacity и цвет в зависимости от состояния(hover, active и т.д.)
https://codepen.io/Vald3r/pen/EGQPyQ
в кнопки всё прописалось без проблем ¯\_(ツ)_/¯
5c2df38706c02377120238.png
должно быть вот так:
5c2df419ce9c4848111808.png
  • Вопрос задан
  • 131 просмотр
Решения вопроса 1
@Vald3r Автор вопроса
вообщем иконку задал фоном > добавил 2 svg файла(для состояний hover и focus), внутри файлов через fill и fill-opacity прописал нужные цвета иконок
5c3b1131e1801134230544.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
monochromer
@monochromer
Задавать псевдоэлементы ::before и ::after для input некорректно. Либо делайте иконку как фон у input, либо оборачивайте input в элемент-обертку и позиционируйте иконку относительно этой обертки.
Ответ написан
IlyaDeveloper
@IlyaDeveloper
UX/UI Дизайнер
Конечно и не будет работать, потому что input одинарный тег по грубому он не имеет закрытия в нем нельзя разместить псевдоэлемент, вот делай так
.input
    i.icon-search
    input.input__field(type="text" placeholder="search")

Ну или просто псевдоклас повесь ток уже на .input
Кстате такой небольшой хак если у тя иконка как раз такого размера как нужно то можно ее вывести еще так
.input:before {
  content: url("../img/sprites/icon-search.svg");
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Amigoweb Магнитогорск
от 30 000 до 40 000 руб.
iWeekender Краснодар
от 80 000 руб.
22 апр. 2019, в 00:21
5000 руб./за проект
21 апр. 2019, в 21:02
1000 руб./за проект
21 апр. 2019, в 19:41
5000 руб./за проект