您的當(dāng)前位置：首頁(yè)JS Input里添加小圖標(biāo)的兩種方法

JS Input里添加小圖標(biāo)的兩種方法

來(lái)源：九壹網(wǎng)

我們?cè)谧鼍W(wǎng)頁(yè)的時(shí)候，經(jīng)常需要在input里面添加小圖標(biāo)，那么這里就介紹比較常見的兩種方法。

方法一

將小圖標(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ù)大家的！

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

JS Input里添加小圖標(biāo)的兩種方法