CSS Input search auto-suggest | HTML, CSS & JavaScript

body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #0f172a; /* Deep dark blue background */
    }

/* Base Container */
    .autosuggest-wrapper {
      position: relative;
      width: 420px;
      font-family: 'Inter', system-ui, sans-serif;
      color: #e2e8f0; 
    }

/* Search Box Wrapper */
    .search-box {
      position: relative;
      display: flex;
      align-items: center;
    }

.search-icon {
      position: absolute;
      left: 14px;
      color: #94a3b8;
      pointer-events: none; 
    }

/* The Sleek Input */
    .suggest-input {
      width: 100%;
      padding: 20px 16px 20px 44px;
      font-size: 15px;
      color: #f8fafc;
      background-color: #1e293b;
      border: 1px solid #334155;
      border-radius: 10px;
      box-sizing: border-box;
      outline: none;
      transition: all 0.2s ease;
    }

.suggest-input::placeholder {
      color: #64748b;
    }

/* The Glow Effect on Focus */
    .suggest-input:focus {
      border-color: #3b82f6;
      background-color: #0f172a;
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    }

/* The Floating Dark List */

.suggest-list {
      position: absolute;
      top: calc(100% + 10px);
      left: 0; width: 100%;
      margin: 0; padding: 6px;
      list-style: none;
      background-color: #1e293b;
      border: 1px solid #334155;
      border-radius: 10px;
      box-sizing: border-box;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
      max-height: 220px; overflow-y: auto;
      z-index: 100; opacity: 0;
      visibility: hidden;
      transform: translateY(-8px) scale(0.98);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

/* Trigger List on Focus */
    .search-box:focus-within + .suggest-list,
    .suggest-list:active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

/* List Items */
    .suggest-list li {
      padding: 12px 14px;
      margin-bottom: 2px;
      cursor: pointer;
      border-radius: 6px;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

.suggest-list li:last-child {
      margin-bottom: 0;
    }

.suggest-list li:hover {
      background-color: #334155;
      color: #60a5fa; 
    }

/* Custom Scrollbar for the list */
    .suggest-list::-webkit-scrollbar {
      width: 6px;
    }
    .suggest-list::-webkit-scrollbar-thumb {
      background-color: #475569;
      border-radius: 10px;
    }

- CSS Input search auto-suggest

Live Preview