Input input box with a picture of how to use CSS layout implementation

Now a lot of pages in order to beautiful, image, usually in the user name, password and other input box to add a picture in order to more image of the meaning of this input box. The art of a small picture, but to the front end brought a lot of trouble, how to locate small pictures, and compatible with the major browsers (including IE6) has become a headache.


For example, the above diagram, the specific implementation method is as follows

Copy Code code as follows:


<div class= "Item-ifo" >


<input type= "text" id= "LoginName" name= "LoginName" class= "text" tabindex= "1" autocomplete= "Off"/>


<div class= "I-name ico" ></div>


</div>

Copy Code code as follows:


. Item-ifo {


position:relative;


width:307px;


}


. Item-ifo. ico {


width:16px;


height:16px;


Position:absolute;


top:8px;


right:12px;


Z-index:5;


}


. Item-ifo. pic{


Background:url (i/one4.jpg) no-repeat #fff;


}

The code can be implemented as

Set the absolute/relative positioning Position:relation/absolute in the outer item-ifo style;

In ICO, the inside setting is wide and high to ensure that the picture can be displayed, set the absolute positioning absolute, use top and left to locate.

In pic, the path of the picture can be stated.