asp.net - 在文本框中设置边距

Question

我有一个带有背景图像的普通 asp.net 文本框，其属性如下所示:

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

这是我的文本框的 View :

这是我的文本框:

 <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

您可以将文本框放在带有 background-image 的 div 中，并使用内边距定位文本框，使其不与图像重叠:

​.textbox
{
 background-image:url('http://placehold.it/15/15');   
 background-repeat:no-repeat;
 background-position:3px 3px;
 border:solid 1px black;
 border-radius: 5px;
 padding-left:20px;
 width:200px;
}
.textbox input
{
 border:none;
 background:transparent;
 width:100%;     
 outline: none; //removes orange border in google chrome
}

-- SEE DEMO --