Putting a image inside a input box

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]