搜索框组件

一个简单的搜索框组件，为社交媒体界面设计，支持暗模式，并具有互补的配色方案。

预览

HTML 代码

<div class="flex justify-center items-center p-4 bg-gray-800 dark:bg-gray-900">
    <input type="text" placeholder="Search..." class="w-full max-w-md p-2 border-2 border-blue-500 dark:border-blue-300 rounded-lg bg-gray-700 dark:bg-gray-800 text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:border-blue-400 dark:focus:border-blue-200">
    <button class="ml-2 p-2 bg-blue-500 dark:bg-blue-600 rounded-lg text-white hover:bg-blue-400 dark:hover:bg-blue-500 focus:outline-none">Search</button>
</div>

相关组件

Glassmorphism 搜索框组件

具有灰度颜色的响应式 glassmorphism 样式搜索框组件，适用于博客或内容网站，具有磨砂玻璃状半透明输入和按钮。包括深色模式支持。

打开

粗犷主义搜索框

一个残酷主义风格的搜索框组件，用于仪表盘，具有互补色彩方案和适度复杂性，支持响应式设计和深色主题，使用 Tailwind CSS。

打开

材料设计搜索框

一个受材料设计原则启发的搜索框组件，使用 Tailwind CSS 构建。它具有响应式行为，能够适应容器宽度，通过悬停和聚焦阴影过渡（深度效果）提供视觉反馈，并全面支持黑暗主题。该组件包括一个领先的搜索图标，并确保干净、现代的美学。仅使用 CSS 实现。由于其 `w-full` 特性，非常适合嵌入各种布局。为确保无障碍，确保将 `input` 元素与相应的 `<label>` 配对，或提供描述性的 `aria-label` 。

打开