CODEWITHSUNDEEP
htmlcss
qua1ity
qua1ity

Reputation: 623

Move icon inside input field

I have an icon inside my input field with the following code:

<input type="text" id="checkoutField" value="[email protected]">

and the icon is placed at the right, with the help of these CSS lines:

background: #f5f5f5 url(http://i.imgur.com/5xD8KRw.png);
background-repeat: no-repeat;
background-position: right;

The icon is touching the right side of the input field, is there a way to get some spacing in between?

jsfiddle: http://jsfiddle.net/6q4Lbqj4/ ..Margin or padding doesn't seem to do it.

Upvotes: 0

Views: 1488

Answers (2)

Nathan
Nathan

Reputation: 321

You can set your background position to something like:

background-position: right 10px top 9px;

This code basicly says that you want your background 10px from the right side and 9px from the top. See: http://w3.org/TR/css3-background/#the-background-position

Upvotes: 5

Ben Aubin
Ben Aubin

Reputation: 5657

Percentages

CSS has percentages, a measurement relative to the parent bloc, this means that an element with a width of 90%, inside of a container with a width of 100px will be 90px. You could set a value in pixels, but if the size of your input changes, the image won't respond.

Solution:

We're going to set the background-position to 90%, or 10% from the right. If you want, you can also change the padding-right to a percentage, and it'll be more responsive.

#checkoutField {
	height: 40px;
	margin-top: 10px;
	border: 1px solid #e6e6e6;
	padding-left: 15px;
	padding-right: 50px;
	
    background: #f5f5f5 url(http://i.imgur.com/5xD8KRw.png);
	background-repeat: no-repeat;
	background-position: 90%;
}
  <input type="text" id="checkoutField" value="[email protected]">

Right Position

CSS3 also added background-position: right 10px center;, which means 10px away from the right, centered in all other directions (vertical only for this example). The center is required.

So:

#checkoutField {
	height: 40px;
	margin-top: 10px;
	border: 1px solid #e6e6e6;
	padding-left: 15px;
	padding-right: 50px;
	
    background: #f5f5f5 url(http://i.imgur.com/5xD8KRw.png);
	background-repeat: no-repeat;
	background-position: right 10px center;
}
  <input type="text" id="checkoutField" value="[email protected]">

Upvotes: 0

Related Questions