小编给大家分享一下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> <div class="box"> <input type="text" class="username" value="搜索"/> </div> </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> <div class="box"> <i class="icon-search"></i> <input type="text" class="username" value="搜索"/> </div> </body>
以上是“JS中Input里如何添加小图标”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。