В этом уроке мы создали панель поиска, используя HTML CSS и JavaScript. Панель поиска полностью адаптивна, а также имеет функции открытия и закрытия. Чтобы открыть панель поиска, нужно просто нажать на значок поиска, а чтобы закрыть, нужно нажать на значок крестика. Я добавил анимацию в поле поиска.
Чтобы создать адаптивную панель поиска в HTML, CSS и JavaScript, следуйте этим пошаговым инструкциям:
Для начала добавьте в файл index.html следующие HTML-коды :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Search Bar in HTML and CSS</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Unicons CSS -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
</head>
<body>
<div class="input-box">
<i class="uil uil-search"></i>
<input type="text" placeholder="Search here..." />
<button class="button">Search</button>
</div>
</body>
</html>
Затем добавьте следующие коды CSS в файл style.css :
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #4070f4;
}
.input-box {
position: relative;
height: 76px;
max-width: 900px;
width: 100%;
background: #fff;
margin: 0 20px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-box i,
.input-box .button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.input-box i {
left: 20px;
font-size: 30px;
color: #707070;
}
.input-box input {
height: 100%;
width: 100%;
outline: none;
font-size: 18px;
font-weight: 400;
border: none;
padding: 0 155px 0 65px;
background-color: transparent;
}
.input-box .button {
right: 20px;
font-size: 16px;
font-weight: 400;
color: #fff;
border: none;
padding: 12px 30px;
border-radius: 6px;
background-color: #4070f4;
cursor: pointer;
}
.input-box .button:active {
transform: translateY(-50%) scale(0.98);
}
/* Responsive */
@media screen and (max-width: 500px) {
.input-box {
height: 66px;
margin: 0 8px;
}
.input-box i {
left: 12px;
font-size: 25px;
}
.input-box input {
padding: 0 112px 0 50px;
}
.input-box .button {
right: 12px;
font-size: 14px;
padding: 8px 18px;
}
}