Create a Responsive Search Bar in HTML & CSS Free Source Code

A search bar is an essential tool for finding information on the internet or within a specific website particular page, or post. It provides a simple and efficient way to search for content or products without the need to manually navigate through multiple pages.

In today’s digital age, a responsive search bar is an essential element for any website. It allows users to easily search for specific content, making navigation more efficient and user-friendly.

In this blog, we will guide you through creating a responsive search bar using HTML & CSS. Before we start, we assume that you have basic knowledge of HTML & CSS.

First, let’s understand the basic structure of a search bar. A search bar typically consists of an input field where users can type their search query and a search button to initiate the search.

They are usually placed in the header section of a website for easy access. To create a search bar, we need to add an input element and a button element

Search Bar in HTML & CSS

Creating a search bar in HTML and CSS is a relatively simple process that can add a lot of functionality to your website. In this guide, we will show you how to create a search bar using HTML and CSS. Todo List Using HTML, CSS, and JavaScript

Step 1: Create a Folder: Create a new folder on your computer where you will store all the files related to your search bar.
Step 2: Create a index.html File: Open a text editor, such as Notepad or Sublime Text, and create a new file called “index.html” inside the folder you created in Step 1. This will be the main file where we will add our HTML code.
Step 3: Create a style.css File: create a new file called “style.css’ in your text editor and save it as “style.css” in the same folder as your index.html file.

After creating the files, it’s important to remember to paste the provided codes into the designated files. However, if you prefer not to go through this process, you can simply scroll down and download the Responsive Search Bar by clicking on the provided download button.

index.html file. Copy this code and paste it into your code editor.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Search Bar</title>
    <link rel="stylesheet" href="styles.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-3204cc1c-ffec-4d1d-ae21-161e102a1c76: url('https://notarena.com/wp-content/plugins/ultimate-post/assets/img/loading.gif');}.elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-904a2669-cbd6-4a2a-9920-2736234a7416: url('https://i0.wp.com/notarena.com/wp-content/uploads/2024/10/BG.png?fit=1200%2C726&ssl=1');}.rll-youtube-player .play{--wpr-bg-689fbc7c-007d-43a1-80f6-521bfd2203a2: url('https://notarena.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".ultp-block-wrapper .slick-loading .slick-list","style":".ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-3204cc1c-ffec-4d1d-ae21-161e102a1c76: url('https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif');}","hash":"3204cc1c-ffec-4d1d-ae21-161e102a1c76","url":"https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif"},{"selector":".elementor-1911 .elementor-element.elementor-element-2e43d051, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-904a2669-cbd6-4a2a-9920-2736234a7416: url('https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1');}","hash":"904a2669-cbd6-4a2a-9920-2736234a7416","url":"https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-689fbc7c-007d-43a1-80f6-521bfd2203a2: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"689fbc7c-007d-43a1-80f6-521bfd2203a2","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Search...">
        <button class="search-button">
            <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Search" title="Create a Responsive Search Bar in HTML &amp; CSS Free Source Code 2" data-lazy-src="search-icon.png"><noscript><img decoding="async" src="search-icon.png" alt="Search" title="Create a Responsive Search Bar in HTML &amp; CSS Free Source Code 2"></noscript>
        </button>
    </div>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/notarena.com\/wp-admin\/admin-ajax.php","nonce":"f787b24636","url":"https:\/\/notarena.com\/code-library\/create-search-bar-in-html-amp-css","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://notarena.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

style.css file. Copy this code and paste it into your code editor.

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

body {
    font-family: Arial, sans-serif;
    background-color: #1a1a2e; /* Dark blue background for the body */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.search-container {
    position: relative;
    width: 80%;
    max-width: 400px;
}

.search-input {
    width: 100%;
    padding: 12px 20px;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: white; /* Search bar background */
}

.search-input:focus {
    outline: none;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
    background-color: #f0f0f0; /* Subtle change on focus */
}

.search-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border: none;
    background-color: #0f3460; /* Dark blue button */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-button img {
    width: 20px;
    height: 20px;
}

.search-button:hover {
    background-color: #162447; /* Darker blue on hover */
}

.search-button:active {
    transform: translateY(-50%) scale(0.95); /* Button click animation */
}

/* Responsive design */
@media (max-width: 600px) {
    .search-input {
        font-size: 16px;
        padding: 10px 15px;
    }
    .search-button {
        width: 40px;
        height: 40px;
    }
}

Adding a search bar to your website can improve the user experience and help visitors find what they need. You can create a simple and functional search bar using basic HTML and CSS. Then, you can make it even better by adding advanced search features and styling it to match your website’s design. This article aims to give you the information and source code you need to create your search bar successfully.

Download the code below and open it into your code editor in the index.html file.