HTML制作带放大镜的搜索框

以下是一个简单的HTML代码，可以实现带放大镜的搜索框。你可以在其中添加样式和JavaScript，以使其更适合你的网站。

<div class="search-container">
  <input type="text" placeholder="Search...">
  <button type="submit"><i class="fa fa-search"></i></button>
</div>

在这个代码中，我们使用了一个包含输入框和搜索按钮的`div`元素。在输入框中，我们使用了`placeholder`属性来设置默认文本。在搜索按钮中，我们使用了Font Awesome图标库中的放大镜图标。

你可以使用CSS来设置输入框和搜索按钮的样式，以及设置放大镜图标的样式。你还可以使用JavaScript来实现放大镜功能，当用户单击放大镜图标时，能够显示一个放大镜窗口。

相关问题

hbuilder制作圆角搜索栏，无边框，搜索框旁边是放大镜的标志，搜索框与放大镜之间有条线

您可以使用以下代码来创建一个圆角搜索栏，无边框，搜索框旁边是放大镜的标志，搜索框与放大镜之间有条线：

<style>
    .search-box {
        display: flex;
        align-items: center;
        padding: 5px;
        border-radius: 20px;
        border: none;
        background-color: #f5f5f5;
    }
    
    .search-input {
        flex: 1;
        height: 30px;
        margin-left: 10px;
        border: none;
        outline: none;
        font-size: 16px;
        background-color: transparent;
    }
    
    .search-icon {
        margin-right: 10px;
    }
    
    .search-line {
        height: 20px;
        width: 1px;
        background-color: #ccc;
        margin: 0 10px;
    }
</style>

<div class="search-box">
    <div class="search-icon">
        <img src="放大镜图标的路径" alt="搜索">
    </div>
    <div class="search-line"></div>
    <input type="text" class="search-input" placeholder="请输入关键字">
</div>

其中，`放大镜图标的路径`需要替换为您自己的放大镜图标的路径。您可以调整样式以满足您的需要。