Article Categories

Selected Reading

Create a Search Bar using HTML and CSS

HTML CSS Web Development Front End Technology

To create a search bar using HTML and CSS, we can use simple form elements and basic CSS properties. A search box is one of the most commonly used components in a website which makes navigation easier for users.

Syntax

/* Basic search bar structure */
.search-container {
    display: flex;
    align-items: center;
}

input[type="text"] {
    padding: value;
    border: value;
    border-radius: value;
}

button {
    padding: value;
    background-color: value;
    border: value;
}

Steps to Create a Search Bar

Create a form element with a text input and submit button
Style the input field with padding, border, and border-radius
Design the button with background-color and color properties
Add :hover effects for better user interaction
Use Font Awesome icons for the search button

Example

The following example creates a complete search bar with styling and hover effects

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Search Bar Example</title>
    <style>
        .search {
            padding: 5px;
            background-color: #031926;
            max-width: fit-content;
            border-radius: 5px;
            display: flex;
            align-items: center;
        }
        
        input[type="text"] {
            padding: 10px;
            border: 2px solid #031926;
            border-radius: 5px 0 0 5px;
            width: 200px;
            outline: none;
            font-size: 14px;
        }
        
        button {
            padding: 10px 12px;
            border: none;
            border-radius: 0 5px 5px 0;
            background-color: #031926;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        button:hover {
            color: #031926;
            background-color: white;
        }
        
        .search-container {
            margin: 20px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="search-container">
        <h3>Search Bar using HTML and CSS</h3>
        <p>Type your search query below:</p>
        
        <div class="search">
            <form action="#">
                <input type="text" placeholder="Search...">
                <button type="submit">
                    <i class="fa fa-search"></i>
                </button>
            </form>
        </div>
    </div>
</body>
</html>

A search bar appears with a text input field and a search button with a magnifying glass icon. The input field has rounded corners on the left, the button has rounded corners on the right, and both are styled with a dark blue color scheme. When hovering over the button, it changes from dark blue to white with dark blue text.

Key CSS Properties Used

Property	Purpose
`padding`	Adds space inside elements
`border-radius`	Creates rounded corners
`background-color`	Sets background color
`transition`	Smooth hover effects
`display: flex`	Aligns input and button

Conclusion

Creating a search bar with HTML and CSS is straightforward using form elements and basic styling. The combination of proper padding, borders, and hover effects creates an attractive and functional search component for any website.

Yaswanth Varma

Updated on: 2026-03-15T18:08:45+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next