快捷導(dǎo)航

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)文章

一文詳解JavaScript的轉(zhuǎn)碼方式
JavaScript 轉(zhuǎn)碼是指將 JavaScript 代碼從一種編碼方式轉(zhuǎn)換為另一種編碼方式,常見(jiàn)的轉(zhuǎn)碼方式包括 URL 編碼和 Base64 編碼,解碼是前端比較常見(jiàn)的一種操作,本文就給大家講講JavaScript轉(zhuǎn)碼方式
2023-09-09
微信小程序?qū)崿F(xiàn)上傳圖片功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-05-05
Vuex模塊化應(yīng)用實(shí)踐示例
這篇文章主要介紹了Vuex模塊化應(yīng)用實(shí)踐示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JavaScript中undefined和is?not?defined的區(qū)別與異常處理
這篇文章主要給大家介紹了關(guān)于JavaScript中undefined和is?not?defined的區(qū)別與異常處理的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-03-03
改變checkbox默認(rèn)選中狀態(tài)及取值的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇改變checkbox默認(rèn)選中狀態(tài)及取值的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
JavaScript設(shè)計(jì)模式之構(gòu)造函數(shù)模式實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之構(gòu)造函數(shù)模式,結(jié)合實(shí)例形式分析了構(gòu)造函數(shù)模式的概念、功能、定義及使用方法,需要的朋友可以參考下
2018-07-07
JS比較2個(gè)日期間隔的示例代碼
這篇文章主要介紹了JS比較2個(gè)日期間隔的方法,需要的朋友可以參考下
2014-04-04
JS實(shí)現(xiàn)點(diǎn)擊li標(biāo)簽彈出對(duì)應(yīng)的索引功能【案例】
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊li標(biāo)簽彈出對(duì)應(yīng)的索引功能,結(jié)合具體實(shí)例形式分析了javascript事件響應(yīng)、元素遍歷等相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
JavaScript實(shí)現(xiàn)文本目標(biāo)字符替換和一鍵全部替換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本目標(biāo)字符替換和一鍵全部替換，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06
談?wù)凧avaScript類(lèi)型系統(tǒng)之Math
Math 對(duì)象并不像 Date 和 String 那樣是對(duì)象的類(lèi)，因此沒(méi)有構(gòu)造函數(shù) Math()，像 Math.sin() 這樣的函數(shù)只是函數(shù)，不是某個(gè)對(duì)象的方法。您無(wú)需創(chuàng)建它，通過(guò)把 Math 作為對(duì)象使用就可以調(diào)用其所有屬性和方法
2016-01-01