JS Input里添加小圖標(biāo)的兩種方法
更新時(shí)間：2017年11月11日 13:28:21 作者：QunBinCheng
大家在做網(wǎng)站的時(shí)候，經(jīng)常需要在input里面添加小圖標(biāo)功能，看似功能很簡(jiǎn)單，但是實(shí)現(xiàn)起來(lái)還是有點(diǎn)技巧的，下面小編給大家介紹下JS Input里添加小圖標(biāo)的兩種方法，需要的朋友參考下吧
我們?cè)谧鼍W(wǎng)頁(yè)的時(shí)候，經(jīng)常需要在input里面添加小圖標(biāo)，那么這里就介紹比較常見(jiàn)的兩種方法。
方法一
將小圖標(biāo)當(dāng)做input的背景來(lái)插入，直接上代碼吧：
<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>
<div class="box">
<input type="text" class="username" value="搜索"/>
</div>
</body>
方法二
使用 i 標(biāo)簽插入
<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>
<div class="box">
<i class="icon-search"></i>
<input type="text" class="username" value="搜索"/>
</div>
</body>
總結(jié)
以上所述是小編給大家介紹的JS Input里添加小圖標(biāo)的兩種方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
本文主要分享了js封裝一個(gè)tab切換效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果
這篇文章主要介紹了JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果的相關(guān)資料,通過(guò)定義兩個(gè)接口，發(fā)送驗(yàn)證請(qǐng)求和返回?cái)?shù)據(jù)驗(yàn)證手機(jī)號(hào)和驗(yàn)證是否一致，后臺(tái)根據(jù)接口去實(shí)現(xiàn)，需要的朋友可以參考下2016-06-06
HTML中的setCapture和releaseCapture使用介紹
setCapture函數(shù)的作用就是將后續(xù)的mouse事件都發(fā)送給這個(gè)對(duì)象，releaseCapture就是將鼠標(biāo)事件還回去，由 document、window、object之類的自行來(lái)處理。這樣就保證了在拖動(dòng)的過(guò)程中，不會(huì)由于經(jīng)過(guò)了其它的元素而受到干擾2012-03-03
談?wù)凧avaScript異步函數(shù)發(fā)展歷程
對(duì)大部分JavaScript開(kāi)發(fā)者而言，async函數(shù)仍是新鮮事物，其發(fā)展經(jīng)歷了漫長(zhǎng)的旅程。本文將梳理總結(jié)JavaScript異步函數(shù)的發(fā)展歷程，并表示未來(lái)async函數(shù)將成為實(shí)現(xiàn)異步的主要方式。2015-09-09
微信小程序跨頁(yè)面?zhèn)鬟fdata數(shù)據(jù)方法解析
這篇文章主要介紹了微信小程序跨頁(yè)面?zhèn)鬟fdata數(shù)據(jù)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼
這篇文章主要介紹了js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
雖然小程序在剛推出時(shí)是不支持組件化的,但如今小程序開(kāi)始支持自定義組件開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于微信小程序組件化開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下2023-03-03
本篇文章主要是對(duì)javascript操作referer進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
函數(shù)是由關(guān)鍵字function、函數(shù)名加一組參數(shù)及置于大括號(hào)中需要執(zhí)行的一段語(yǔ)義定義的。今天我們就來(lái)詳細(xì)講解一下JavaScript中的Function。2015-02-02
下面小編就為大家推薦一篇基于JSONP原理解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12