Question

I am having a normal asp.net text box with a background image with properties as shown below:

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

This is the view of my textbox:

And here is my textbox:

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

Now I would like to know is there any possiblity to set the margin for the inside text or place the cursor position after that image and if user clears the text inside the cursor should stop before the image.

I have tried using css properties: text align:middle but it starts from the center and I don’t want that and making a background image also dosen’t suits my needs.showing and hiding image also is not a good option in my case as I have many.Other than these three options anyone can opt me the best way I am really glad to hear them.

Answer 1

You could put the textbox in a div with a background-image, and position the textbox with padding so that it doesn’t overlap the 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
}

— SEE DEMO —