【HTML+CSS】input輸入框內添加兩個圖標

如果input框中有一個圖標的情況下可以採取給input設置背景圖片的方式實現

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

但是，如果一個input裏面有左右兩個圖標的時候這種方式顯然就不能實現了，如下圖

如果想要實現這樣的效果需要考慮另一種思路實現：採用圖片定位的方式

具體代碼如下：

注意：我是在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;
    }