在文本框中设置边距

Question

我有一个普通的asp.net文本框，背景图片的属性如下所示：

.userbackground
{
    background-image: url('../images/user.png');
    background-repeat: no-repeat;
    background-position: fixed;
    text-align:center;
    width:16px;
    height:16px;
}

这是我文本框的视图：

这是我的文本框：

 <asp:TextBox ID="UserName" runat="server" BorderStyle="Solid" BorderWidth="1px" 
 BorderColor="#0099CC" BackColor="#FAFFBD" MaxLength="0" 
 AutoCompleteType="Disabled" CssClass="userbackground"></asp:TextBox>

现在我想知道是否有可能设置内部文本的边距或将光标位置放在该图像之后，如果用户清除光标内的文本应该在图像之前停止。

我尝试过使用css属性：text align：middle但它从中心开始，我不想那样做背景图像也不适合我的需要。显示和隐藏图像也不是一个好选择在我的情况下，因为我有很多。除了这三个选项，任何人都可以选择我最好的方式，我很高兴听到他们。

Answer 1

您可以将文本框放在带有div的{​​{1}}中，并使用填充位置放置文本框，使其不与图像重叠：

background-image

-- SEE DEMO --

Answer 2

您可以在没有周围<div>元素的情况下执行此操作。但请记住，必须将输入定义为块元素display:block;才能应用填充。

<强> SEE DEMO

<input type="text" />

input
{
    background-image:url('http://placehold.it/15/15');   
    background-repeat:no-repeat;
    background-position:3px 3px;
    border:solid 1px black;
    border-radius: 5px;
    width:200px;
    height:22px;
    display:block;
    padding-left:20px;
    outline: none;
}

Answer 3

你应该在你的风格中使用padding-left .plz在线演示http://jsfiddle.net/SJBbs/1/。如果您的问题尚未解决，请留下您的意见..