@Vald3r

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

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

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

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

Войти через центр авторизации
Похожие вопросы