Помещение изображения внутри поля ввода

Ответ 1

Попробуйте следующее:

background: url(images/icon.png) no-repeat right center;

Объяснение этого CSS выглядит следующим образом:

фон: [url to image] [не повторяется] [горизонтальное положение] [вертикальное положение]

Ответ 2

В качестве дополнения к Bazzz answer, если вы не хотите, чтобы значок был справа от правой границы, вы можете указать дополнение с правой стороны.

background: url(images/icon.png) no-repeat right 10px center;

Это поместит значок справа, но сохранит его на 10 пикселей от самого края. Итак, объяснение CSS будет выглядеть так:

фон: [URL-адрес] [указать повторение] [горизонтальное положение] [отступ справа] [вертикальное положение]

Ответ 3

Тот же ответ, кроме изменения padding-left до padding-right, и измените положение фона.

Что-то вроде:

background: url(images/comment-author.gif) no-repeat scroll right;
padding-right: 30px;

Ответ 4

Использование изображения и SVG. Padding хорошо работает во всех браузерах (mars 2017)

Файл изображения

.date_element {
    background-image: url(../img/calendar.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-origin: content-box;
}

Файл SVG

.date_element {
    background-image: url(../img/calendar.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-origin: content-box;
    background-size: 2.5rem 2.5rem;
}