html - 在输入字段内移动图标

Question

我的输入字段中有一个图标，代码如下:

<input type="text" id="checkoutField" value="mail@gmail.com">

在这些 CSS 行的帮助下，图标被放置在右边:

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

图标触及输入字段的右侧，有没有办法在两者之间留出一些间距？

jsfiddle:http://jsfiddle.net/6q4Lbqj4/ ..边距或填充似乎没有做到这一点。

Answer 1

您可以将背景位置设置为:

background-position: right 10px top 9px;

此代码基本上表示您希望背景距右侧 10px，距顶部 9px。请参阅:http://w3.org/TR/css3-background/#the-background-position