HTML/CSS - Простая форма поиска

HTML/CSS - Простая форма поиска

Коллеги всем привет.

В сегодняшней статье мы вам покажем как создать простую форму поиска на своем сайте. Это окно поиска отличается от любой анимации простым возможным макетом. Этот пользовательский интерфейс окна поиска полезен для тех веб-сайтов, где не требуются сложные эффекты.

 

HTML Код.

<!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 Код.

@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%);
}

 

Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.

 

ПОХОЖИЕ СТАТЬИ

jQuery карусель с эффектом увеличительного стекла
jQuery карусель с эффектом увеличительного стекла
WEB
JQuery плагин для увеличения изображения с увеличительным стеклом
JQuery плагин для увеличения изображения с увеличительным стеклом
WEB
JQuery - Галерея изображений с увеличением при наведении
JQuery - Галерея изображений с увеличением при наведении
WEB