/chengQunBin/article/details/78505654
方法一
将小图标当做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(find.png) no-repeat;width: 30px;height: 50px;position: absolute;top: -1px;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>
效图：
个人总结：
原理就是在input下面添加了底图，感觉第一种方法更好，可以少用元素
扩展一下估计就可以实现如下图的录入错误提示了
