<header> <div class="top-l"> <img src="./images/top-l.jpg" alt=""> </div> <div class="top-inp"> <input type="text" class="chaitem" name="" id="" placeholder="给你推荐 香烟爱上火柴"> </div> <div class="top-r"><img src="./images/top-r.jpg" alt=""></div> </header> 我这段代码如何在input里面的提示文字前面加个放大镜图标
时间: 2023-10-05 21:13:49 浏览: 179
如何避免常见的6种HTML5错误用法
您可以将放大镜图标添加到 input 元素前面的标签中,如下所示:
```html
<header>
<div class="top-l">
<img src="./images/top-l.jpg" alt="">
</div>
<div class="top-inp">
<i class="fa fa-search"></i> <!-- 添加放大镜图标 -->
<input type="text" class="chaitem" name="" id="" placeholder="给你推荐 香烟爱上火柴">
</div>
<div class="top-r">
<img src="./images/top-r.jpg" alt="">
</div>
</header>
```
在上述代码中,我们使用了 Font Awesome 图标库的放大镜图标,并将其添加到 input 元素的前面。您可以根据您的需要使用其他图标库或者自己制作图标并添加到相应位置。
阅读全文