Панель поиска на чистом HTML/CSS

Панель поиска на чистом HTML/CSS

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

В сегодняшней статье мы поговорим о том как создать панель поиска на чистом HTML и CSS. Если вы ищете окно поиска CSS с классной анимацией, то это ваш вариант. Окно поиска появится при наведении курсора на значок.

 

Требования.

Нам нужно подключить библиотеку google material 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 Код.

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

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;
    }
}

 

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

 

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

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