Как через CSS изменить цвет фонового изображения формы, не задев второй фон?

Question

Всем привет!

Помогите разобраться, пожалуйста.

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

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

.lorem {
  font-size: 13px;
  font-weight: bold;
  margin: 26px 0 12px 0;
}

.input-text-2 {
  font-size: 13px;
  padding: 0 47px;
  height: 44px;
  width: 296px;
  box-sizing: border-box;
  border: 1px solid #a0a0a0;
  background: url(http://via.placeholder.com/44x44/0000ff/ff0000?text=Foto_1) no-repeat 19px 50%, #fff;
}

.input-text-2:focus {
  background: url(http://via.placeholder.com/44x44/ff0000/0000ff?text=Foto_2) no-repeat 19px 50%, #e9f8ff;
  background-blend-mode: multiply;
}

<div class="lorem">Lorem ipsum</div>
<input type="text" class="input-text-2" value="Input value" placeholder="Input text placeholder">

БЛОГ НА HUSL

Как через CSS изменить цвет фонового изображения формы, не задев второй фон?

Ответы (0 шт):