组件 搜索框 Glassmorphism 搜索框组件

Glassmorphism 搜索框组件

具有使用柔和色彩的磨砂玻璃效果 (glassmorphism) 的现代搜索框组件。该组件简单而优雅,专为专业商业网站设计。它具有具有微妙模糊效果的半透明背景、响应式设计和暗模式支持。搜索框包括一个搜索图标和一个非常适合企业环境的干净输入字段。

预览

HTML 代码

<!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
  <!-- Search Container with Glassmorphism Effect -->
  <div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
    <!-- Search Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
    
    <!-- Search Input -->
    <input 
      type="text" 
      placeholder="Search..." 
      class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
    >
    
    <!-- Optional Clear Button -->
    <button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
  
  <!-- Optional Hint Text -->
  <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
    Search for products, services, or information
  </div>
</div>

相关组件

粗犷主义搜索框

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

打开

搜索框组件

使用 Tailwind CSS 的响应式搜索框,支持深色模式。

打开

Glassmorphism 搜索框

一个简单、响应式的 glassmorphism 搜索框组件,具有灰度颜色,适用于仪表板。支持深色模式。

打开