Pure HTML/CSS search bar

Pure HTML/CSS search bar

Hello colleagues.

In today's article, we'll talk about how to create a search bar with pure HTML and CSS. If you are looking for a CSS search box with cool animation, then this is your option. A search box will appear when you hover over the icon.

 

Requirements.

We need to include the google material icons library to add icons.

 <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated Search Bar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
</head>
<body>
<div class="searchBox">
    <input class="searchInput" type="text" name="" placeholder="Search">
    <button class="searchButton" href="#">
        <span class="material-symbols-outlined">
            search
        </span>
    </button>
</div>
</body>
</html>

 

CSS code.

body {
    background-color: #f5f5f5;
}

.searchBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate(-50%,50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;

}

.searchBox:hover > .searchInput {
    width: 240px;
    padding: 0 6px;
}

.searchBox:hover > .searchButton {
    background: white;
    color : #2f3640;
}

.searchButton {
    color: white;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.searchInput {
    border:none;
    background: none;
    outline:none;
    float:left;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;

}

@media screen and (max-width: 620px) {
    .searchBox:hover > .searchInput {
        width: 150px;
        padding: 0 6px;
    }
}

 

Thank you all, I hope my article was of some help to you.

 

SIMILAR ARTICLES

jQuery carousel with magnifying glass effect
jQuery carousel with magnifying glass effect
WEB
jQuery plugin to enlarge image with magnifying glass
jQuery plugin to enlarge image with magnifying glass
WEB
jQuery - Image gallery with zoom on hover
jQuery - Image gallery with zoom on hover
WEB