Выдвигающаяся форма поиска для сайта на CSS3

Возможно, вашему сайту это пригодиться: я подготовил классный эффект для формы поиска, написанный на чистом CSS3 без использования javascript. Что же это за эффект? Это выдвигающаяся форма поиска. При клике на форму поиска, форма увеличится до указанной ширины. Увеличение формы по ширине будет происходить плавно, анимировано и красиво!

[посмотреть демонстрацию]

В HTML вставьте вот такой код:

<div class="search_form">
<form action="" method="post">
<input ENGINE="search" results="5" name="s" id="search_box" placeholder="">
</form>
</div>

А в CSS вот этот код:

/* поиск */
.search_form input[type=search]
{
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
width:50px;
margin-top: 10px;
min-height: 28px;
padding: 4px 20px 4px 8px;
font-size: 12px;
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.search_form input[type=search]:focus
{
width: 250px;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
outline: none;
}

Строка №7 – можете указать ширину начального поиска.
Строка №17 – можно указать ширину поиска при нажатии на форму.
Строки №12-№14 – здесь можно задать секунды, насколько быстро должен быть выполнен фокус.

Вот такой вот полезный эффект вы сможете быстро, а главное не сложно, установить на сайте для формы поиска. Кстати, дополнительный материал по этой же теме можете посмотреть тут.
Удачи! Спасибо, что вы подписаны на обновление моего блога. Я думаю, вы не пожалеете!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

6 Ответов на комментарий - Выдвигающаяся форма поиска для сайта на CSS3

1. Александр

   27.05.2016 в 01:05

   Привет Степан.Прикольно, нужная порой штука

   А вот еще кому интересно, может кто то попрактикуется,
   тоже типа выдвижной

   /* Сброс стилей для поля ввода в браузерах webkit */
   input {
   outline: none;}
   input[ENGINE=search] {
   -webkit-appearance: textfield;
   -webkit-box-sizing: content-box;
   font-family: inherit;
   font-size: 100%;}
   input::-webkit-search-decoration,
   input::-webkit-search-cancel-button {
   display: none; /* Удаляем иконку поиска и сброса */
   }
   input[type=image] {
   margin: 13px 0 0 0;
   }
   /* Поле ввода строки поиска */
   input[type=search] {
   background: #f4fafb;
   border: solid 2px #028bb8;
   padding: 9px 10px 9px 20px;
   width: 170px;
   margin: 13px 0 10px 3px;
   -moz-border-radius: 5px 5px 5px 5px;	
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;	
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   transition: all .5s;
   }
   input[type=search]:focus {
   width: 220px;
   background-color: #fff;
   border-color: #ffd906;	
   -webkit-box-shadow: 0 0 5px rgba(249,217,4,.5);
   -moz-box-shadow: 0 0 5px rgba(249,217,4,.5);
   box-shadow: 0 0 5px rgba(249,217,4,.5);
   }
   /* Заполнитель */
   input:-moz-placeholder {
   color: #999;
   }
   input::-webkit-input-placeholder {
   color: #999;
   }

   Думаю в коде много комментировать не нужно и так все
   понятно, где фоновые цвета, где цвет текста, где ширина
   и так далее.
   Ну а тем кому не понятно нужно подучить CSS чтоб не задавать лишние вопросы

   У меня на блоге такая форма поиска стоит
2. Степан => автор блога

   01.06.2016 в 14:35

   Привет, Саша! Форма красивая, я пробовал.
   Спасибо за полезный комет и код.
3. Валерий

   08.01.2019 в 22:11

   Здравствуйте.
   Возможно ли Ваше решение выезжающей формы поиска реализовать на:
   Всё по умолчанию: Joomla! 3.8.12 VirtueMart 3.4.2 шаблон protostar и модуль поиска VM — Search in Shop
   Спасибо.
4. Валерий

   08.01.2019 в 23:17

   Всё работает отлично – Спасибо.:arrow:
   Вот только окно пустое – как бы вставить туда иконку поиска “лупу”
5. Степан => автор блога

   12.01.2019 в 22:50

   Вот тут Вы найдете ответ:
   /effekty-dlya-sajta-2/formy-poiska-dlya-sajtov.html/
6. Степан => автор блога

   12.01.2019 в 22:51

   Здравствуйте, Валерий.
   Я с Joomla уже давно не работал. Для WordPress подсказал бы.

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, Вебмастеру, для сайта, поиск, эффекты для сайта