JS Input里添加小图标的两种方法

发布于 2020-11-18|标签javascript
复制链接
大家在做网站的时候,经常需要在input里面添加小图标功能,看似功能很简单,但是实现起来还是有点技巧的,下面小妖给大家介绍下JS Input里添加小图标的两种方法,需要的朋友参考下吧
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法。方法一将小图标当做input的背景来插入,直接上代码吧: ```javascript *{ 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; } ``` 方法二使用 i 标签插入 ```javascript *{ 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; } ``` 原文地址: http://blog.csdn.net/chengqunbin/article/details/78505654
冀ICP备17029012号-4 | 版权所有©鲍亚龙 |免责声明  | GIF图库  | NUXT版