Октябрь 25, 2019 Запись была обновлена
Форма поиска на 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)
Здравствуйте! Скажите пожалуйста, как сделать вместо слова Поиск как у вас — лупу, но не картинкой и вебшрифтом. Делаю сайт и решил использовать вебшрифт по-полной)
Здравствуйте, Иван!
В тег <input> будет проблематично вставить.
Но здесь несколько вариантов:
1) Использовать :after или :before. И задать там веб-шрифт, а затем позиционировать в необходимое место иконку.
2) Использовать вместо кнопки <input> кнопку <button><!— здесь иконка —></button>.
Спасибо! Буду пробовать)
Здравствуйте, можете , пожалуйста объяснить куда вставлять html-часть?
Добрый день, Влад!
HTML вставить необходимо в файл шаблона Вашей CMS.
здравствуйте, у меня есть рабочий скрипт поиска на php, но я не знаю как привязать его к кнопке поиска в вашей форме
В данном примере есть лишь внешний вид формы. Здесь нет функционала. Вам необходимо скопировать соответствующие стили и добавить в HTML необходимые классы, как на данной форме.
Здравствуйте, подскажите пожалуйста как убрать подсказки в поисковой строке?