About this snippet

Enhance your search bar with a minimal results dropdown. The list items appear cleanly when the input is focused, which offers a distraction-free and responsive autocomplete experience.

Size
1.9 KB
Uses
HTML, CSS
Loads
Nothing external
Views
514

Collections

Related snippets

<div class="search-container">
  <input type="text" class="main-search" placeholder="Search for users...">
  <ul class="results-list">
    <li>
      <span class="avatar">JD</span>
      <div class="details"><strong>John Doe</strong><span>Developer</span></div>
    </li>
    <li>
      <span class="avatar">JS</span>
      <div class="details"><strong>Jane Smith</strong><span>Designer</span></div>
    </li>
    <li>
      <span class="avatar">MR</span>
      <div class="details"><strong>Mike Ross</strong><span>Manager</span></div>
    </li>
  </ul>
</div>
.search-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: relative;
  width: 300px;
}
.main-search {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  font-size: 1rem;
  color: #1f2937;
}
.main-search:focus {
  border-color: #3b82f6;
}
.results-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  list-style: none;
  padding: 0;
  margin-top: 5px;
  display: none;
  overflow: hidden;
}
.main-search:focus + .results-list {
  display: block;
}
.results-list li {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f9fafb;
}
.results-list li:last-child { border-bottom: none; }
.results-list li:hover {
  background: #f9fafb;
}
.avatar {
  width: 32px;
  height: 32px;
  background: #e5e7eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
}
.details {
  display: flex;
  flex-direction: column;
}
.details strong {
  font-size: 0.9rem;
  color: #1f2937;
}
.details span {
  font-size: 0.8rem;
  color: #9ca3af;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save