html搜索框里面放一个放大镜
时间: 2023-07-20 19:46:07 浏览: 275
您可以使用HTML和CSS来创建一个搜索框和放大镜图标。以下是一个示例代码:
```
<!-- HTML代码 -->
<div class="search-box">
<input type="text" placeholder="搜索">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
<!-- CSS代码 -->
.search-box {
display: inline-block;
position: relative;
}
.search-box input[type="text"] {
width: 200px;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
}
.search-box button[type="submit"] {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 10px;
background: none;
border: none;
cursor: pointer;
}
.search-box button[type="submit"]:hover {
background: #ccc;
}
.fa-search:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #666;
}
```
这个示例使用了Font Awesome图标库中的放大镜图标,您需要在HTML中引用它。如果您不想使用Font Awesome,可以使用其他图标库或自己设计一个图标。