https://blog.csdn.net/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下面添加了底图，感觉第一种方法更好，可以少用元素
扩展一下估计就可以实现如下图的录入错误提示了