How to Create a Simple Search Bar with CSS and HTML

byCodepen.tech -
0

Introduction

How to Create a Simple Search Bar with CSS and HTML

A search bar is an essential component of most websites, allowing users to quickly find information or products. Creating a simple, stylish search bar is easy with just HTML and CSS. Whether you’re building a blog, e-commerce site, or portfolio, adding a search bar enhances user experience and navigation.

In this guide, we’ll walk through building a simple, customizable search bar using HTML and CSS.

Step-by-Step Guide to Building a Simple Search Bar

1. Setting Up the Basic HTML Structure

To start, we’ll create a basic HTML structure for the search bar. We’ll include an input field where users can type their search query and a button to submit the search.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Search Bar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Search Bar Container -->
  <div class="search-container">
    <input type="text" class="search-input" placeholder="Search...">
    <button class="search-button">Search</button>
  </div>

</body>
</html>

Explanation:

  • Search Container: The .search-container div wraps the input field and button, allowing us to style them together.
  • Search Input: The .search-input field is where users enter their search terms. The placeholder text is set to “Search…” to prompt users.
  • Search Button: The .search-button is a simple button that will allow users to submit their search query.

2. CSS for Styling the Search Bar

Next, we’ll use CSS to style the search bar, giving it a clean, modern look. This style will make the search bar stand out while keeping it minimal and user-friendly.

/* styles.css */

/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body Styling */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

/* Search Container */
.search-container {
  display: flex;
  align-items: center;
  border: 2px solid #3498db;
  border-radius: 25px;
  overflow: hidden;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Search Input */
.search-input {
  flex: 1;
  padding: 10px 15px;
  border: none;
  outline: none;
  font-size: 1rem;
}

/* Search Button */
.search-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

/* Button Hover Effect */
.search-button:hover {
  background-color: #2980b9;
}

Explanation of the CSS:

  1. Container Styling: The .search-container uses display: flex to align the input and button side by side. The border-radius and box-shadow properties create rounded corners and a subtle shadow, giving it a modern look.

  2. Search Input Styling: The .search-input is set to take up all available space inside the container using flex: 1, with padding for comfortable typing.

  3. Button Styling: The .search-button has a blue background color with white text for contrast. The transition on background-color makes the button change smoothly to a darker shade on hover.

3. Adding Icons for a Professional Look (Optional)

For a more polished look, you can add a magnifying glass icon to the search button. Here, we’ll use Font Awesome to add the icon.

Adding Font Awesome:

To use Font Awesome, include the following <link> tag in the <head> section of your HTML:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Update HTML for the Icon:

Add the icon to the search button by updating the button’s HTML:

html
<button class="search-button"><i class="fas fa-search"></i></button>

CSS for Icon Alignment:

No additional CSS is necessary, as Font Awesome icons will align automatically with the button text.

4. Making the Search Bar Responsive

To ensure the search bar is accessible on mobile devices, we’ll add a media query to adjust its size on smaller screens.


/* Responsive Design for Search Bar */
@media (max-width: 480px) {
  .search-container {
    width: 100%;
    max-width: 280px;
  }
}

Explanation:

  • Responsive Width: The .search-container will be limited to 280px on smaller screens (480px or smaller) to fit comfortably within mobile layouts.

5. Adding Additional Effects (Optional)

To make the search bar even more engaging, consider adding a focus effect that changes the border color when the user clicks into the input field.

CSS for Focus Effect:


/* Focus Effect on Search Input */
.search-input:focus {
  border: none;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

Explanation:

  • Focus Shadow: The box-shadow on focus gives a soft blue glow to the search bar, providing feedback to the user that they are in the input field.

Final HTML and CSS Code

Here’s the complete code with optional styling, icons, and responsive adjustments.

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Search Bar</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>

  <!-- Search Bar Container -->
  <div class="search-container">
    <input type="text" class="search-input" placeholder="Search...">
    <button class="search-button"><i class="fas fa-search"></i></button>
  </div>

</body>
</html>

CSS:


/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body Styling */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

/* Search Container */
.search-container {
  display: flex;
  align-items: center;
  border: 2px solid #3498db;
  border-radius: 25px;
  overflow: hidden;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Search Input */
.search-input {
  flex: 1;
  padding: 10px 15px;
  border: none;
  outline: none;
  font-size: 1rem;
}

/* Search Button */
.search-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

/* Button Hover Effect */
.search-button:hover {
  background-color: #2980b9;
}

/* Focus Effect on Search Input */
.search-input:focus {
  border: none;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* Responsive Design for Search Bar */
@media (max-width: 480px) {
  .search-container {
    width: 100%;
    max-width: 280px;
  }
}

Preview

See the Pen How to Create a Simple Search Bar with CSS and HTML by codepen (@codepen-the-selector) on CodePen.

Conclusion

Creating a simple search bar with HTML and CSS is an effective way to enhance user experience and provide intuitive navigation on your website. By following this guide, you’ve built a customizable search bar with a sleek design, optional icon integration, and responsive adjustments for mobile.

With this design, you can easily incorporate a search bar into any webpage, whether it’s a blog, e-commerce site, or personal portfolio, making it both functional and aesthetically pleasing.

You may like these posts

Previous Post Next Post

نموذج الاتصال