Putting a image inside a input box - css

Question

Similar to Put icon inside input element in a form
But how to I get the icon inside and on the right side of the box?

Answer 1

Try this:
background: url(images/icon.png) no-repeat right center;
The explanation for this CSS is as follows:
background: [url to image] [don't repeat] [horizontal position] [vertical position]

Answer 2

As an addition to Bazzz's answer, if you don't want the icon right up against the right border, you can specify padding on the right side.
background: url(images/icon.png) no-repeat right 10px center;
This will put the icon on the right side, but keep it 10 pixels from the very edge. So, the CSS explanation would look like this:
background: [URL to icon] [specify no repeating] [horizontal position] [padding on right side] [vertical position]

Answer 3

Same answer except change padding-left to padding-right, and change the positioning of the background.
Something like:
background: url(images/comment-author.gif) no-repeat scroll right;
padding-right: 30px;

Answer 4

Using image and SVG. Padding works well in all browsers (mars 2017)
Image file
.date_element {
background-image: url(../img/calendar.png);
background-repeat: no-repeat;
background-position: right center;
background-origin: content-box;
}
SVG file
.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;
}