代碼:<input type="text" class="user" />
設置class類屬性,添加小圖標。創建<style>標簽,然后在這個標簽里面設置user樣式。
1.使用background-image設置input背景圖片;
2.background-size設置背景圖片的大小;
3.background-position設置背景圖片的位置;
4.background-repeat設置背景圖片不重復;
5.padding設置圖片的內邊距。
css樣式代碼:
<style type="text/css">
.user{
background-image: url(img/user.png);/*設置小圖標*/
background-size: 25px 25px;/*小圖標的大小*/
background-position: 5px 4px;/*小圖標在input的位置*/
background-repeat: no-repeat;/*背景小圖標不重復*/
padding: 8px 10px 8px 40px;/*設置input內邊距*/
/*設置input樣式好看*/
border:1px solid #ddd;
margin: 30px;
width: 220px;
}
</style>