好看的搜索框样式

预览：

HTML

/* From Uiverse.io by Fadhilmagass */ 
<div id="container" class="custom-container">
  <div id="searchBar" class="custom-search-bar dark-mode">
    <svg
      height="24"
      width="24"
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="custom-search-icon dark-mode"
    >
      <path
        d="M11 19a8 8 0 100-16 8 8 0 000 16zm8-8l5 5"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <input
      placeholder="Search..."
      class="custom-search-input dark-mode"
      type="text"
    />
    <svg
      height="24"
      width="24"
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="custom-filter-icon dark-mode"
    >
      <path
        d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707l-6.414 6.414A2 2 0 0013 14.828V17.586a1 1 0 01-.293.707l-2 2A1 1 0 019 19.586V14.828a2 2 0 00-.293-1.414L2.293 6.707A1 1 0 012 6V4z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </div>
</div>

CSS

代码解析

HTML 解析

HTML 部分主要定义了一个自定义的搜索框和它所在的容器，具体内容如下：

1. <div id="container" class="custom-container">：
   • 这是包裹搜索框的主要容器，custom-container 类负责整个容器的布局和外观。
   • 这个容器有可能根据切换的主题（黑暗模式或光明模式）调整背景颜色。
2. <div id="searchBar" class="custom-search-bar dark-mode">：
   • 这是搜索框的容器，custom-search-bar 类控制其样式。搜索框的样式会根据 dark-mode 或 light-mode 的类来进行调整。
3. 搜索框内容：
   • 包含一个 <input> 输入框，用来进行文本搜索。
   • 搜索框还包含了两个 SVG 图标：
     • 一个是放大镜图标，通常表示搜索功能。
     • 另一个是过滤器图标，可能是用来显示筛选选项的。

CSS 解析

CSS 部分定义了容器、搜索框以及图标的样式，以下是各个关键部分的说明：

1. .custom-container：
   • 使用 Flexbox 布局来将搜索框居中显示，justify-content: center 和 align-items: center 保证容器内的内容（即搜索框）垂直和水平居中。
   • 设置了 height: 100% 和 min-height: 100%，确保容器的高度充满父元素的高度。
   • 根据模式的不同（dark-mode 或 light-mode），背景颜色会进行切换。
2. .custom-container.dark-mode 和 .custom-container.light-mode：
   • 这两个类分别为黑暗模式和光明模式设置不同的背景颜色。
3. .custom-search-bar：
   • 这个类设置了搜索框的外观，包括圆角、内边距、显示为 flex 布局（以便容纳输入框和图标），并使用动画让边框颜色不断变化（rgb-outline 动画）。
   • 搜索框背景和阴影会根据模式进行调整：
     • 暗模式：背景为深色渐变，阴影较强。
     • 光明模式：背景为浅色渐变，阴影较弱。
4. .custom-search-input：
   • 定义了输入框的外观，background: transparent 使得输入框背景透明，border: none 去除了边框，outline: none 去除了点击时的外框。
   • 文本颜色会根据模式切换：
     • 暗模式：文本为白色。
     • 光明模式：文本为黑色。
   • 输入框的占位符（placeholder）颜色也会根据模式切换。
5. .custom-search-icon 和 .custom-filter-icon：
   • 这两个类控制搜索框和过滤器图标的颜色，使用了 transition 让图标颜色平滑过渡。
   • 图标颜色同样根据模式切换：
     • 暗模式：图标为白色。
     • 光明模式：图标为黑色。
6. .toggle-theme：
   • 这是一个按钮类，用于切换主题（黑暗模式和光明模式），它的样式包括背景色、圆角、字体颜色和定位，按钮位于页面右上角。