当前位置：极客笔记 > HTML > HTML 问答 > 使用HTML和CSS创建搜索栏

使用HTML和CSS创建搜索栏

使用HTML和CSS创建搜索栏

参考： Create a Search Bar using HTML and CSS

在现代网页设计中，搜索栏是一个重要的组件，它允许用户快速找到他们需要的信息。本文将详细介绍如何使用HTML和CSS创建一个简单而又美观的搜索栏。我们将提供10-20个示例代码，每个示例都是独立的，可以直接在HTML文件中运行。

基础搜索栏

首先，我们从一个最基础的搜索栏开始。以下是一个简单的HTML和CSS代码示例，创建了一个基本的搜索框。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础搜索栏 - how2html.com</title>
<style>
    .search-bar {
        width: 300px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
</style>
</head>
<body>
    <input type="text" class="search-bar" placeholder="Search how2html.com">
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

带有搜索按钮的搜索栏

接下来，我们添加一个搜索按钮，以便用户可以点击按钮来提交搜索请求。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带搜索按钮的搜索栏 - how2html.com</title>
<style>
    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .search-input {
        padding: 10px;
        border: 1px solid #ccc;
        border-right: none;
        border-radius: 5px 0 0 5px;
        outline: none;
    }
    .search-button {
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #f2f2f2;
        cursor: pointer;
        border-radius: 0 5px 5px 0;
        outline: none;
    }
</style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Search how2html.com">
        <button class="search-button">Search</button>
    </div>
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

搜索栏的CSS样式美化

现在，我们将对搜索栏的样式进行美化，使其看起来更加现代和吸引人。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美化搜索栏 - how2html.com</title>
<style>
    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
    }
    .search-input {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 50px 0 0 50px;
        outline: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    .search-button {
        padding: 15px;
        border: none;
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        border-radius: 0 50px 50px 0;
        outline: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
</style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Search how2html.com">
        <button class="search-button">Search</button>
    </div>
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

带有图标的搜索栏

为了使搜索栏更加直观，我们可以添加一个放大镜图标在搜索框内或按钮上。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带图标的搜索栏 - how2html.com</title>
<style>
    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
        position: relative;
    }
    .search-input {
        width: 100%;
        padding: 15px 40px 15px 15px;
        border: none;
        border-radius: 50px;
        outline: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    .search-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #007BFF;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Search how2html.com">
        <i class="search-icon">🔍</i> <!-- 放大镜图标 -->
    </div>
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

响应式搜索栏

随着移动设备的普及，响应式设计变得越来越重要。以下是一个响应式搜索栏的示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式搜索栏 - how2html.com</title>
<style>
    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .search-input {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 50px;
        outline: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        margin-bottom: 10px; /* 在小屏幕上提供间距 */
    }
    .search-button {
        width: 100%;
        padding: 15px;
        border: none;
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        border-radius: 50px;
        outline: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    @media (min-width: 768px) {
        .search-container {
            flex-direction: row;
        }
        .search-input {
            margin-bottom: 0; /* 在大屏幕上移除间距 */
            border-radius: 50px 0 0 50px;
        }
        .search-button {
            border-radius: 0 50px 50px 0;
        }
    }
</style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Search how2html.com">
        <button class="search-button">Search</button>
    </div>
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

带有动画效果的搜索栏

为了提升用户体验，我们可以给搜索栏添加一些动画效果。以下是一个带有动画效果的搜索栏示例。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带动画效果的搜索栏 - how2html.com</title>
<style>
    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
        position: relative;
    }
    .search-input {
        width: 100%;
        padding: 15px 40px 15px 15px;
        border: 2px solid #007BFF;
        border-radius: 50px;
        outline: none;
        transition: all 0.3s ease;
    }
    .search-input:focus {
        box-shadow: 0 0 10px rgba(0,123,255,0.5);
    }
    .search-button {
        padding: 15px;
        border: none;
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        border-radius: 0 50px 50px 0;
        outline: none;
        transition: background-color 0.3s ease;
    }
    .search-button:hover {
        background-color: #0056b3;
    }
</style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Search how2html.com">
        <button class="search-button">Search</button>
    </div>
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

搜索栏与背景融合

有时候我们希望搜索栏能够与网页背景融合，以下是一个与背景融合的搜索栏示例。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索栏与背景融合 - how2html.com</title>
<style>
    body {
        background: url('https://via.placeholder.com/1500') no-repeat center center;
        background-size: cover;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .search-container {
        width: 100%;
        max-width: 400px;
    }
    .search-input {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 50px;
        outline: none;
        opacity: 0.7;
    }
    .search-input::placeholder {
        color: #fff;
    }
    .search-button {
        padding: 15px;
        border: none;
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        border-radius: 50px;
        outline: none;
        opacity: 0.7;
    }
</style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Search how2html.com">
        <button class="search-button">Search</button>
    </div>
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

搜索栏悬浮效果

悬浮效果可以让搜索栏在页面中更加突出，以下是一个带有悬浮效果的搜索栏示例。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索栏悬浮效果 - how2html.com</title>
<style>
    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border-radius: 50px;
        overflow: hidden;
    }
    .search-input {
        flex: 1;
        padding: 15px;
        border: none;
        outline: none;
    }
    .search-button {
        padding: 15px 20px;
        border: none;
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        outline: none;
    }
</style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Search how2html.com">
        <button class="search-button">Search</button>
    </div>
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

搜索栏内嵌入下拉菜单

有时候我们希望在搜索栏中嵌入下拉菜单，以便用户可以选择搜索的类别。以下是一个带有下拉菜单的搜索栏示例。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索栏内嵌入下拉菜单 - how2html.com</title>
<style>
    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 600px;
        margin: 20px auto;
    }
    .search-select {
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px;
        outline: none;
    }
    .search-input {
        flex: 1;
        padding: 15px;
        border: 1px solid #ccc;
        border-left: none;
        border-right: none;
        outline: none;
    }
    .search-button {
        padding: 15px;
        border: 1px solid #ccc;
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        border-radius: 0 5px 5px 0;
        outline: none;
    }
</style>
</head>
<body>
    <div class="search-container">
        <select class="search-select">
            <option>All Categories</option>
            <option>Web Design</option>
            <option>HTML</option>
            <option>CSS</option>
        </select>
        <input type="text" class="search-input" placeholder="Search how2html.com">
        <button class="search-button">Search</button>
    </div>
</body>
</html>

Output:

使用HTML和CSS创建搜索栏

由于篇幅限制，本文只提供了部分示例代码。在实际开发中，你可以根据需要调整样式和功能，以达到最佳的用户体验。搜索栏的设计和实现可以非常灵活，可以根据网站的整体风格和用户需求进行定制。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程