BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2016-05-26 / Вр:00:36 / просмотров: 8916

Выдвигающаяся форма поиска для сайта на 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. Привет Степан.Прикольно, нужная порой штука :idea:

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

    /* Сброс стилей для поля ввода в браузерах 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. Степан => автор блога Степан => автор блога

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

  3. Валерий

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

  4. Валерий

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

  5. Степан => автор блога Степан => автор блога

    Вот тут Вы найдете ответ:
    https://bloggood.ru/effekty-dlya-sajta-2/formy-poiska-dlya-sajtov.html/

  6. Степан => автор блога Степан => автор блога

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

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Метки: , , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4540