1+ Search Bar Components - Vanilla CSS

Our Collection of Vanilla CSS Search Bar Components offers straightforward solutions to enhance your website's search functionality. With easy integration and minimal coding, these search bars are designed to optimize user experience effortlessly. Choose from a variety of styles to seamlessly blend into your website's design. Improve your website's SEO and user engagement with our intuitive search bar components.

Search Bar with Dropdown Menu

Streamline website navigation and search functionality with a search bar featuring a dropdown menu. Learn how to implement a versatile search bar that offers users easy access to search suggestions.

Author: Joe

Preview
Code

<nav>
  <img src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/canva.svg" />
  <img class="burger" src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/burger.svg" />
  <div class="dropdown">
    <img class="search" src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/search.svg" />
    <input type="text" placeholder="Try logo, poster, anything!" />
    <div class="menu">
      <div class="menu-content">
        <button>
         <img src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/video.svg" />
         <span>
          Video
         </span>
         <span>1920 / 1080 px</span>
        </button>
        <button>
          <img src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/facebook.svg" />
          <span>
           Facebook Post (Landscape)
          </span>
          <span>1920 / 1080 px</span>
         </button>
         <button>
          <img src="https://raw.githubusercontent.com/frontend-joe/css-dropdowns/e3b974065a57c868b3def6074d238c36e75ef2cd/dropdown-2/instagram.svg" />
          <span>
           Instagram Post (Square)
          </span>
          <span>1940 / 788 px</span>
         </button>
      </div>
    </div>
  </div>
</nav>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Inter Var";
}

nav {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 4px -1px rgba(57, 76, 96, 0.15);
}

.burger {
  width: 16px;
  height: 16px;
}

.dropdown {
  position: relative;
  width: 200px;
  height: 40px;
}

input,
.search {
  position: absolute;
}

input {
  z-index: 2;
  top: 2px;
  height: 36px;
  width: 198px;
  border: 1px solid #dfe4e7;
  outline: none;
  padding-left: 34px;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
}

.search {
  top: 13px;
  left: 10px;
  z-index: 3;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

input:focus {
  border-color: transparent;
}

.menu {
  z-index: 1;
  position: absolute;
  height: 40px;
  width: 100%;
  transition-property: width;
  transition-duration: 0.3s;
}

input:focus ~ .menu {
  box-shadow: 0 0px 8px 0 rgba(57, 76, 96, 0.18);
  height: 170px;
  width: 290px;
  padding-top: 40px;
  border-radius: 4px;
  background: #fff;
}

input:focus ~ .menu .menu-content {
  visibility: visible;
  opacity: 1;
  transition: 0.3s;
}

.menu-content {
  position: absolute;
  width: inherit;
  visibility: hidden;
  opacity: 0;
  border-top: 1px solid #dfe4e7;
}

.menu button {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
}

.menu button img {
  width: 16px;
  height: 16px;
}

.menu button:hover {
  background: #f0f1f3;
}

span {
  white-space: nowrap;
}

.menu button span:last-child {
  opacity: 0;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
}

.menu button:hover span:last-child {
  opacity: 1;
}

```
No need of JavaScript
```

Simple Search Bar

Explore the simplicity of search bar implementation using HTML and vanilla CSS, perfect for adding search functionality to your website without external dependencies.

Author: Admin

Preview
Code

<div class="search-container">
 <form action="/search" method="get">
   <input type="text" placeholder="Search..." name="q" />
   <input type="submit" value="Search" />
 </form>
</div>

html,
body {
  margin: 0;
  height: 100%;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type='text'] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}

input[type='submit'] {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

input[type='submit']:hover {
  background-color: #45a049;
}

```
No need of JavaScript
```