CODEWITHSUNDEEP
css
Jason94
Jason94

Reputation: 13620

Putting a image inside a input box

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?

Upvotes: 15

Views: 45558

Answers (4)

SandroMarques
SandroMarques

Reputation: 6554

Using image and SVG. Padding works well in all browsers (mars 2017)

enter image description here

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

Upvotes: 2

Chris
Chris

Reputation: 458

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]

Upvotes: 8

Paul
Paul

Reputation: 141927

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;

Upvotes: 3

Bazzz
Bazzz

Reputation: 26942

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]

Upvotes: 29

Related Questions