HTML在透明輸入框中添加圖標怎樣實現

最近,我在寫一個網站內頁搜索項目。上面的搜索框中遇到一個問題。我想將搜索圖標放在搜索框中,但長時間沒有解決...

不用多說，我們直接進入了主題：
基本思想
事實上，輸入框及其後面的圖標被放置在div中，然後輸入框的邊框被設置爲0px，最後div的邊框被設置爲最終的外部邊框。
HTML代碼：

<div class="search">
        <form action="http://www.baidu.com">
           <input type="text" placeholder="請輸入關鍵詞">
               <span>
                 <a href="###"><img src="images/icon001.png" alt=""></a>
               </span>
          </form>
</div>

CSS樣式：

這裏是設置外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這裏是設置↓輸入框內的長度和寬度↓，boder是0px，裏面的字體大小，點擊不會高亮顯示outline:none。
然後設置透明度rgba()，最後一個屬性值就是透明度(介於0和1之間)

input {
    width: 200px;
    height: 35px;
    border: 0;
    font-size: 14px;
    outline: none;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    font-size: 16px;
    margin: 0 10px;
}