How to Create Search Bar Using HTML and CSS

A search bar is very important in helping users to search what they are looking for on a website. You’ve probably used it to search for information on platforms like YouTube, Google, Facebook, and others. A search bar can be made even if you only know the fundamentals of HTML and CSS.

Today in this blog you will learn how to create a simple, stylish search bar with smooth animations using HTML and CSS. Recently I created a responsive navbar using HTML & CSS, I hope that project will be helpful for you as well!

You May Like This:

• Login Form in HTML and CSS
• 100+ Frontend Projects to Level up Your Skills
• Responsive Navbar using HTML and CSS

HTML

First, create the basic structure for search bar using HTML:

  <input placeholder="Search..." class="input" type="text">

The <input> element creates a text input field. The placeholder="Search..." shows placeholder text inside the box, which disappears when typing.

CSS

Now, style the search bar

.input {
    
  padding: 10px;
    
  width: 120px;
    
  border: none;
    
  outline: none;
    
  border-radius: 5px;
    
  box-shadow: 0 1px gray;
    
  font-size: 18px;
    
  transition: width 0.3s;
    
  font-family: Consolas, monaco, monospace;
    
}
    
.input::placeholder {
    
  color: blue;
    
}

The .input class styles the search bar, ensuring a modern look with padding, a rounded design, and smooth width transition. The .input::placeholder customizes the placeholder text color for better visibility.

Now Make the search bar expandable

      
.input:focus {
      
  outline: 1px solid blue;
      
  box-shadow: none;
      
  width: 230px;
      
}

The .input:focus applies specific styles when the search bar (input field) is focused, meaning when a user clicks on it or navigates to it using the keyboard.

• outline: 1px solid blue; - It adds a thin blue border around the element when it is focused.
• box-shadow: none; - Removes any shadow effect from the element when it's focused.
• width: 230px; - Sets the element's width to 230 pixels when it is focused.

Conclusion

That’s it, now you’ve successfully created a project on the Search Bar. You can customize the colors, fonts, and dimensions to match the design of your website. If your code doesn’t work or you’ve faced any problems, please comment on this post I will response.

Happy Coding!