HTML/CSS - Search Bar

HTML/CSS - Search Bar

Hello colleagues.

In today's article, I will show you how to create a search box using HTML and CSS. The animation uses pure CSS. As we can see, when we click on the search icon, it expands to form a search bar. If we click outside the bar, it will collapse to form the search bar. This panel will not pop up if a search term is entered.

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search bar css</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flexbox">
    <div class="search">
        <div>
            <input type="text" placeholder="Search . . ." required>
        </div>
    </div>
</div>
</body>
</html>

 

CSS code.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

* {
    font-family: Roboto, sans-serif;
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

.flexbox {
    background-color: #2ecc71;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search {
    margin: 20px;
}

.search > h3 {
    font-weight: normal;
}

.search > h1,
.search > h3 {
    color: white;
    margin-bottom: 15px;
    text-shadow: 0 1px #27ae60;
}

.search > div {
    display: inline-block;
    position: relative;
    filter: drop-shadow(0 1px #27ae60);
}

.search > div:after {
    content: "";
    background: white;
    width: 4px;
    height: 20px;
    position: absolute;
    top: 40px;
    right: 2px;
    transform: rotate(135deg);
}

.search > div > input {
    color: white;
    font-size: 16px;
    background: transparent;
    width: 25px;
    height: 25px;
    padding: 10px;
    border: solid 3px white;
    outline: none;
    border-radius: 35px;
    transition: width 0.5s;
}

.search > div > input::placeholder {
    color: #efefef;
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.search > div > input:focus::placeholder {
    opacity: 1;
}

.search > div > input:focus,
.search > div > input:not(:placeholder-shown) {
    width: 250px;
}

 

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