Не вставляется картинка в placeholder, как её вставить?

Question

[Лол Ликович]

<svg class="bd-placeholder-img rounded-circle" width="300" height="300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#778"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>

Не могу вставить картинку, вроде всё уже перепробовала: не отображается и всё, хоть убейся

Comments

[Ankhena]

Лол Ликович Хочу уточнить, вы именно эту картинку туда хотите вставить или это так, SVG'шка для примера?

Если эту, то это делается градиентом вообще без картинок.

Если другую, то 2 варианта:
1. SVG ставится как фон для инпута.
2. Если нужно менять цвет SVG для разных состояний инпута: input и картинка оборачиваются в div. И картинку абсолютом помещают в нужно место и задают z-index: -1

Answer 1

[Dima Polos]

Как картинку в плейсхолдер вставить???
Фоном ставите инпуту картинку и все. Плейсхолдер для других вещей сделан.

Answer 2

[Spartak (Web-StyleStudio)]

Через placeholder никак.
Как вариант: добавляете для input/textarea дополнительный класс, в этом классе указываете через background картинку, и можно ещё добавить псевдо-класс :active или :focus для этого класса, и в нем отменять показ картинки, тоесть будет что-то типа имитации placeholder - активный инпут->нет картинки, не активен инпут->есть картинка

Answer 3

[ftp14]

Через placeholder сделать такого божественного чуда не получится =). Можете завернуть в background. А если легких путей не ищем, то... Создаем отдельный блок display: flex, туда суем картинку и input (делаем так, как нравится). Только потом будут проблемы со стилями =))