HTML/CSS - Simple Search Form

HTML/CSS - Simple Search Form

Hello colleagues.

In today's article, we will show you how to create a simple search form on your website. This search box differs from any animation in its simple possible layout. This search box UI is useful for websites that don't need complex effects.

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple 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@48,400,0,0"/>
</head>
<body>
<div class="wrap">
    <div class="search">
        <input type="text" class="searchTerm" placeholder="text">
        <button type="submit" class="searchButton">
            <span class="material-symbols-outlined">
                search
            </span>
        </button>
    </div>
</div>
</body>
</html>

 

CSS code.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
    background: #f2f2f2;
    font-family: 'Open Sans', sans-serif;
}

.search {
    width: 100%;
    position: relative;
    display: flex;
}

.searchTerm {
    width: 100%;
    border: 3px solid #293042;
    border-right: none;
    padding: 5px;
    height: 20px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #9DBFAF;
}

.searchTerm:focus{
    color: #293042;
}

.searchButton {
    width: 40px;
    height: 36px;
    border: 1px solid #293042;
    background: #293042;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
}

.wrap{
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

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