Выдвижная форма поиска с помощью чистого CSS Июн 1 2017

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

Демо

Скачать

HTML разметка формы поиска.

Форма поиска задаётся с помощью тега <form>.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Выдвижная форма поиска</title>
</head>
<body>
<div class="wrapper">
<h1>Кликните по значку поиска справа</h1>
<form>
<input class="search" placeholder="Поиск" type="text">
</form>
</div>
</body>
</html>

В браузере мы увидим вот такую простенькую форму.

Стилизация формы поиска.

В файле style.css пишем стили. За форму поиска отвечает класс search.

body{
background: #ccc;
}
.wrapper {
margin: 0 auto;
width: 760px;
overflow: hidden;
padding: 10px;
}
.search {
width: 0px;
height: 30px;
padding: 5px 10px 5px 45px;
float: right;
border: solid 3px #999;
background: #eee url(images/search.png) no-repeat 10px center;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

На данном этапе наша форма поиска будет неподвижной.

Делаем форму поиска выдвижной.

Для этого используем псевдокласс focus.

В этом случае при клике по значку поиска форма выдвигается влево.

.search:focus {
width: 700px;
border: 3px solid #f00;
background-color: #fff;
outline: none;
}

Вот что у нас должно получиться при клике по значку поиска.

Получайте новые статьи по почте

Категории

Выдвижная форма поиска с помощью чистого CSS Июн 1 2017

HTML разметка формы поиска.

Стилизация формы поиска.

Делаем форму поиска выдвижной.

Категории

Страницы