Search Bar Blocks

Copy and paste these search bar designs directly into your projects

Standard Search Bar

A clean and functional search bar with rounded corners

Standard Design

Complete Code (HTML, CSS, JS)

<!-- Standard Search Bar -->
<div class="search-container">
  <input type="text" class="search-input" placeholder="Search products, articles, and more..." id="searchInput">
  <button class="search-btn" id="searchBtn">Search</button>
</div>

<style>
.search-container {
  display: flex;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px 0 0 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.search-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 14px 25px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #2980b9;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('searchInput');
  const searchBtn = document.getElementById('searchBtn');
  
  searchBtn.addEventListener('click', function() {
    performSearch(searchInput.value);
  });
  
  searchInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      performSearch(this.value);
    }
  });
  
  function performSearch(query) {
    if (query.trim() !== '') {
      alert('Searching for: ' + query);
      // Add your search logic here
    }
  }
});
</script>

Minimal Search Bar

A sleek, minimal design with integrated button

Minimal Design

Complete Code (HTML, CSS, JS)

<!-- Minimal Search Bar -->
<div class="search-container">
  <input type="text" class="search-input" placeholder="Search..." id="searchInput">
  <button class="search-btn" id="searchBtn"><i class="fas fa-search"></i></button>
</div>

<style>
.search-container {
  display: flex;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.search-input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 50px;
  border-right: 2px solid #e0e0e0;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.search-btn {
  border-radius: 50px;
  margin-left: -50px;
  background: transparent;
  color: #3498db;
  border: none;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: rgba(52, 152, 219, 0.1);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('searchInput');
  const searchBtn = document.getElementById('searchBtn');
  
  searchBtn.addEventListener('click', function() {
    performSearch(searchInput.value);
  });
  
  searchInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      performSearch(this.value);
    }
  });
  
  function performSearch(query) {
    if (query.trim() !== '') {
      alert('Searching for: ' + query);
      // Add your search logic here
    }
  }
});
</script>

Dark Theme Search Bar

A modern dark theme search bar for dark interfaces

Dark Theme Design

Complete Code (HTML, CSS, JS)

<!-- Dark Theme Search Bar -->
<div class="search-container">
  <input type="text" class="search-input" placeholder="Search in dark mode..." id="searchInput">
  <button class="search-btn" id="searchBtn">Search</button>
</div>

<style>
.search-container {
  display: flex;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
  padding: 14px 20px;
  background: #2c3e50;
  border: 2px solid #34495e;
  color: white;
  border-radius: 8px 0 0 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input::placeholder {
  color: #95a5a6;
}

.search-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.search-btn {
  background: #34495e;
  color: white;
  border: none;
  padding: 14px 25px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #2c3e50;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('searchInput');
  const searchBtn = document.getElementById('searchBtn');
  
  searchBtn.addEventListener('click', function() {
    performSearch(searchInput.value);
  });
  
  searchInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      performSearch(this.value);
    }
  });
  
  function performSearch(query) {
    if (query.trim() !== '') {
      alert('Searching for: ' + query);
      // Add your search logic here
    }
  }
});
</script>

Search Bar with Icon

A search bar with integrated search icon and styled button

Icon Design

Complete Code (HTML, CSS, JS)

<!-- Search Bar with Icon -->
<div class="search-container">
  <i class="fas fa-search search-icon"></i>
  <input type="text" class="search-input" placeholder="Type to search..." id="searchInput">
  <button class="search-btn" id="searchBtn">Go</button>
</div>

<style>
.search-container {
  display: flex;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #95a5a6;
  font-size: 1.2rem;
  z-index: 1;
}

.search-input {
  flex: 1;
  padding: 14px 20px 14px 50px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.search-btn {
  position: absolute;
  right: 0;
  background: #3498db;
  color: white;
  border: none;
  padding: 14px 25px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #2980b9;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('searchInput');
  const searchBtn = document.getElementById('searchBtn');
  
  searchBtn.addEventListener('click', function() {
    performSearch(searchInput.value);
  });
  
  searchInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      performSearch(this.value);
    }
  });
  
  function performSearch(query) {
    if (query.trim() !== '') {
      alert('Searching for: ' + query);
      // Add your search logic here
    }
  }
});
</script>

Animated Search Bar

A search bar that expands when focused with smooth animation

Animated Design

Complete Code (HTML, CSS, JS)

<!-- Animated Search Bar -->
<div class="search-container">
  <input type="text" class="search-input" placeholder="Click to expand..." id="searchInput">
  <button class="search-btn" id="searchBtn">Search</button>
</div>

<style>
.search-container {
  display: flex;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.search-input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: all 0.4s ease;
  transform-origin: right center;
}

.search-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  padding-right: 120px;
}

.search-input:focus + .search-btn {
  transform: scaleX(1);
}

.search-btn {
  position: absolute;
  right: 0;
  background: #3498db;
  color: white;
  border: none;
  padding: 14px 25px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.3s ease;
  transform: scaleX(0);
  transform-origin: right center;
}

.search-btn:hover {
  background: #2980b9;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('searchInput');
  const searchBtn = document.getElementById('searchBtn');
  
  searchBtn.addEventListener('click', function() {
    performSearch(searchInput.value);
  });
  
  searchInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      performSearch(this.value);
    }
  });
  
  function performSearch(query) {
    if (query.trim() !== '') {
      alert('Searching for: ' + query);
      // Add your search logic here
    }
  }
});
</script>