Exore LTD » CSS3 » Форма поиска на CSS3
Лого SiteHere.ru

Октябрь 25, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Форма поиска на CSS3

Красивая форма поиска на CSS3

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

Пример формы поиска можно увидеть здесь:

Посмотреть примерСкачать



HTML часть

Сперва необходимо создать каркас формы. Обычно простая форма поиска состоит из поля ввода и кнопки «Поиск» или «Искать»:

1
2
3
4

<form class="form-wrapper">
    <input id="search" placeholder="Поиск для CSS3, HTML5, jQuery ..." required="" type="text">
    <input value="Поиск" id="submit" type="submit">
</form>

Мы используем некоторые атрибуты из HTML5:

1) placeholder — текст на фоне.

2) required — означает, что поле является обязательным.



CSS часть

Задаем общий вид формы. Добавляем тень, границу и создается эффект объема:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.form-wrapper {
    width: 450px;
    padding: 8px;
    margin: 100px auto;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: #dedede #bababa #aaa #bababa;
    -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
    -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
    box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    background-color: #f6f6f6;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8)); 
    background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
    background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
    background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
    background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
    background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

Далее задаем стили для поля ввода когда оно неактивно, и когда оно в фокусе, т.е. когда мы набираем текст:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.form-wrapper #search {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;    
    font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 1px solid #ccc;
    -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;      
}
 
.form-wrapper #search:focus {
    outline: 0; 
    border-color: #aaa;
    -moz-box-shadow: 0 1px 1px #bbb inset;
    -webkit-box-shadow: 0 1px 1px #bbb inset;
    box-shadow: 0 1px 1px #bbb inset;  
}

Далее прописываем стили для текста, который находится на фоне:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.form-wrapper #search::-webkit-input-placeholder {
    color: #999;
    font-weight: normal;
}
 
.form-wrapper #search:-moz-placeholder {
    color: #999;
    font-weight: normal;
}
 
.form-wrapper #search:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
}

И последним шагом добавляем стили кнопке поиска:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.form-wrapper #submit {
    float: right;    
    border: 1px solid #00748f;
    height: 42px;
    width: 100px;
    padding: 0;
    cursor: pointer;
    font: bold 15px Arial, Helvetica;
    color: #fafafa;
    text-transform: uppercase;    
    background-color: #0483a0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
    background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
    background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
    background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
    background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
    background-image: linear-gradient(top, #31b2c3, #0483a0);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;      
    text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
 
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {		
    background-color: #31b2c3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
    background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
    background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
    background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
    background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
    background-image: linear-gradient(top, #0483a0, #31b2c3);
}	
 
.form-wrapper #submit:active {
    outline: 0;    
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;    
}
 
.form-wrapper #submit::-moz-focus-inner {
    border: 0;
}


Вывод

Красивая форма поиска на CSS3 готова! Если она вписывается в ваш дизайн — берите и применяйте.


Успехов!

Источник: www.red-team-design.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

8 комментариев к записи
  • Иван

    Здравствуйте! Скажите пожалуйста, как сделать вместо слова Поиск как у вас — лупу, но не картинкой и вебшрифтом. Делаю сайт и решил использовать вебшрифт по-полной)

     
    Ответить
    • Юрий

      Здравствуйте, Иван!

      В тег <input> будет проблематично вставить.

      Но здесь несколько вариантов:

      1) Использовать :after или :before. И задать там веб-шрифт, а затем позиционировать в необходимое место иконку.

      2) Использовать вместо кнопки <input> кнопку <button><!— здесь иконка —></button>.

       
      Ответить
  • Vlad

    Здравствуйте, можете , пожалуйста объяснить куда вставлять html-часть?

     

     
    Ответить
    • Юрий Немец

      Добрый день, Влад!

      HTML вставить необходимо в файл шаблона Вашей CMS.

       
      Ответить
  • Ольга

    здравствуйте, у меня есть рабочий скрипт поиска на php, но я не знаю как привязать его к кнопке поиска в вашей форме

     
    Ответить
    • Юрий Немец

      В данном примере есть лишь внешний вид формы. Здесь нет функционала. Вам необходимо скопировать соответствующие стили и добавить в HTML необходимые классы, как на данной форме.

       
      Ответить
  • Макс

    Здравствуйте, подскажите пожалуйста как убрать подсказки в поисковой строке?

     
    Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *