css做搜索框

CSS做搜索框

基础概念

CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页的布局和外观，包括颜色、字体、间距等。

类型

搜索框的样式可以通过CSS进行多种设计，常见的类型包括：

简单搜索框：基本的文本输入框和按钮组合。
带图标的搜索框：在输入框旁边添加图标，提升视觉效果。
动画搜索框：通过CSS动画增强用户体验，如输入框扩展动画。

应用场景

搜索框广泛应用于各种网站和应用中，如：

电商网站：用户可以通过搜索框查找商品。
社交媒体：用户可以通过搜索框查找特定的用户或内容。
新闻网站：用户可以通过搜索框查找特定的新闻文章。

示例代码

以下是一个简单的CSS搜索框示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Search Box</title>
    <style>
        .search-box {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }
        .search-box input[type="text"] {
            flex: 1;
            padding: 5px;
            border: none;
            outline: none;
        }
        .search-box button {
            padding: 5px 10px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        .search-box button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="search-box">
        <input type="text" placeholder="Search...">
        <button>Search</button>
    </div>
</body>
</html>