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?

There is a closed question, pretty similar to this one, http://stackoverflow.com/questions/20634868/put-icon-inside-input-element-in-a-form-not-as-background-image?lq=1 — Francisco Corrales Morales, Apr 21 '14 at 17:09

score 28 · Accepted Answer · answered Aug 15 '11 at 07:02

28

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]

answered Aug 15 '11 at 07:02

Bazzz

25,261
11
51
67

score 7 · Answer 2 · edited May 23 '17 at 12:25

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]

score 3 · Answer 3 · answered Aug 15 '11 at 07:02

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;

answered Aug 15 '11 at 07:02

Paul

135,475
25
268
257

Have you tried using padding-right? I copied your example but for some reason the gif will always stay top-right and vertically-centered. – libjup Jul 29 '13 at 14:39
1

just figured out if you use background-position: right 30px top 10px positioning works well – libjup Jul 29 '13 at 14:46

score 2 · Answer 4 · answered Mar 27 '17 at 16:11

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;
}

Putting a image inside a input box

4 Answers4