本文我們主要介紹兩種JS實現Input裡添加小圖標的方法，大家在做網站的時候，經常需要在input裡面添加小圖標功能，看似功能很簡單，但是實現起來還是有點技巧的，下面小編跟大家介紹下JS Input裡加入小圖示的兩種方法，需要的朋友參考下吧，希望能幫助大家。
方法一
將小圖示當作input的背景來插入，直接上程式碼：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input{
border: none;
}
.box{
height: 50px;
background: yellow;
}
.box input{
width: 200px;
height: 30px;
border-radius: 15px;
margin: 10px 0;
background: url(image/search.gif) no-repeat;
background-color: white;
background-position: 3px;
padding-left: 30px;
border: 1px solid black;
outline: none;
}
</style>
</head>
<body>
<p class="box">
<input type="text" class="username" value="搜索"/>
</p>
</body>方法二
使用i 標籤插入
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
position: relative;
}
.box .icon-search{
background: url(image/search.gif) no-repeat;
width: 20px;
height: 20px;
position: absolute;
top: 6px;
left: 0;
}
.box .username{
padding-left: 30px;
height: 25px;
}
</style>
</head>
<body>
<p class="box">
<i class="icon-search"></i>
<input type="text" class="username" value="搜索"/>
</p>
</body>相關推薦：
以上是兩種JS實作Input裡加入小圖示的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
