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

Question

[Vald3r]

нужно в левой части плейсхолдера разместить svg иконку поиска, меняющую opacity и цвет в зависимости от состояния(hover, active и т.д.)
https://codepen.io/Vald3r/pen/EGQPyQ
в кнопки всё прописалось без проблем ¯\_(ツ)_/¯

должно быть вот так:

Comments

[Сергей delphinpro]

у input нет псевдоэлементов.
Есть только в хромоподобных браузерах. Это нестандартное поведение, не нужно его использовать.

Answer 1

[Vald3r]

вообщем иконку задал фоном > добавил 2 svg файла(для состояний hover и focus), внутри файлов через fill и fill-opacity прописал нужные цвета иконок

Answer 2

[monochromer]

Задавать псевдоэлементы ::before и ::after для input некорректно. Либо делайте иконку как фон у input, либо оборачивайте input в элемент-обертку и позиционируйте иконку относительно этой обертки.

Answer 3

[Пащук Илья]

Конечно и не будет работать, потому что input одинарный тег по грубому он не имеет закрытия в нем нельзя разместить псевдоэлемент, вот делай так

.input
    i.icon-search
    input.input__field(type="text" placeholder="search")

Ну или просто псевдоклас повесь ток уже на .input
Кстате такой небольшой хак если у тя иконка как раз такого размера как нужно то можно ее вывести еще так

.input:before {
  content: url("../img/sprites/icon-search.svg");
}