Как поместить svg картинку в input которая будет менять цвет когда input получает фокус?

Question

[salihov2000]

Хочу сверстать такую форму отправки сообщения:

Но не получается сделать так, чтобы когда инпут получает фокус менялся цвет обводки иконки внутри инпута.

Answer 1

[Рома Зварич]

Как поместить svg картинку в input которая будет менять цвет когда input получает фокус?

Чтобы к SVG был доступ из CSS:
1) его необходимо вставлять в HTML-файл прямо в виде исходного кода
2) либо путём подключения с помощью <use>, предварительно вынеся исходный код SVG-иконки в отдельный файл (например, SVG-спрайт), поместив внутрь и задав ему ID, чтобы по которому можно будет вызвать нужный код

Пример на CodePen с демонстрацией и дополнительными объяснениями комментариями в HTML-коде
https://codepen.io/hisbvdis/pen/MWYyGvW

Comments

[salihov2000]

Спасибо! Не знал про комбинаторы css. В итоге добавил комбинатор "+" в свой код и всё заработало.

[salihov2000]

Вот как я реализовал это, может вам интересно. https://codepen.io/SuperTesto/pen/KKwzBWQ

Answer 2

[salihov2000]

Решение: https://codepen.io/SuperTesto/pen/KKwzBWQ

Answer 3

[Александр]

Делайте две разных картинки или делайте ту часть которую надо менять прозрачной а все остальное белым - тогда можно просто менять фон.