Веб-мастерская Ларисы ВоронинойВыдвижная форма поиска с помощью чистого CSS
WEB-мастерская Ларисы Ворониной logo

Выдвижная форма поиска с помощью чистого 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;
}

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


Рейтинг@Mail.ru