2

我有一个带有背景图像的普通 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 但它从中心开始，我不希望这样，并且制作背景图像也不适合我的需要。在我的情况下，显示和隐藏图像也不是一个好的选择因为我有很多。除了这三个选项之外，任何人都可以选择我最好的方式，我真的很高兴听到它们。

4

3 回答 3

3

您可以将文本框放在 adiv中background-image，并使用填充放置文本框，使其不与图像重叠：

​.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
}

-- 看演示 --

于 2012-04-17T11:21:43.530 回答
2

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

看演示

<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;
}
于 2012-04-17T11:28:34.103 回答
1

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

于 2012-04-17T11:22:54.403 回答