本文我們主要介紹兩種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中文網其他相關文章!