【HTML+CSS】input输入框内添加两个图标

如果input框中有一个图标的情况下可以采取给input设置背景图片的方式实现

input{
background: url("1.jpg") no-repeat 20px 20px  
}

但是，如果一个input里面有左右两个图标的时候这种方式显然就不能实现了，如下图

input添加图片.png

如果想要实现这样的效果需要考虑另一种思路实现：采用图片定位的方式

具体代码如下：

注意：我是在react搭建环境下写的，所以里面用到了require语法，还有style是双括号的形式，如果不是在react环境下改一下写法就可以

 <div style={{ position: "relative", height: "30px",width:"96%",marginLeft:"2%"}}>
      <img  src={[require("./../assets/2x.png")]} className="leftimg"  alt=""/>     //左边图标
      <input placeholder="搜索" className="search" />
     <img  src={[require("./../assets/2x1.png")]} className="rightimg" alt=""/>  //右边图标
</div>

//左边图标
.leftimg{
    float: left;
    width: 16px;
    margin: 8px 25px;
    }
//搜索框样式
.search{
    position: absolute;
    left:0px;
    z-index:-1;  //这里设置为-1，是为了让搜索框放在图片下方
    width:84%;
    height:30px;
    padding-left: 10%;
    border-radius: 5px;
    color:#c9c9c9;
    border:none;
    margin: 0 3%;
    background:#f6f6f6;
}
//右边图标
.rightimg{
    float: right;
    width: 15px;
    margin: 8px 20px;
    }