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;
}