在输入字段

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/ ..Margin或padding似乎没有。

Answer 1

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

background-position: right 10px top 9px;

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

Answer 2

百分比

CSS有百分比，相对于父bloc的度量，这意味着宽度为90%的元素在宽度为100px的容器内将为90px。您可以设置以像素为单位的值，但如果输入的大小发生变化，图像将不会响应。

解决方案：

我们将从右侧将background-position设置为90%或10%。如果需要，您还可以将padding-right更改为百分比，并且响应速度更快。

#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="mail@gmail.com">

正确位置

CSS3还添加了background-position: right 10px center;，这意味着10px远离右侧，以所有其他方向为中心（垂直仅针对此示例）。 center是必需的。

所以：

#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="mail@gmail.com">