Поле поиска, вероятно, является одним из распространенных элементов интерфейса пользователя. Работая над уровнем удобства интерфейса очень часто возникает желание добавить стильное поле поиска. В данном уроке мы создадим такой популярный элемент с помощью псевдо-элементов.
Разметка HTML
Для подготовки такого поля разметка будет минимальна.
Здесь используются специальные атрибуты HTML5 placeholder и required:
- placeholder - данный атрибут задает вывод текста в поле перед тем, как поле получит фокус ввода, затем текст скрывается.
- required - данный атрибут задает обязательное условие наличие информации в поле ввода перед отправкой формы.
HTML5 также имеет новое значение для атрибута type: type="search" . Но она плохо поддерживается в браузерах, поэтому мы не будем его пока использовать.
Такие элементы HTML как img и input не имеют содержания. Следовательно псевдо-элемент, например:before, не будет выводить никаких стрелок для кнопки.
Решением данной задачи в нашем случае является использование button type="submit" вместо input type="submit" . Таким образом, мы сохраняем для формы использование клавиши ENTER.
CSS
Ниже приводятся необходимые для нашей демонстрации стили:
Отмена обтекания текстом
Cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; }
Элементы формы
Префиксы браузеров в коде уроке не приводятся для лучшей наглядности. Вы можете посмотреть полный код в тексте исходника.
/* Стили для контейнера формы */ .form-wrapper { width: 450px; padding: 15px; margin: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); } /* Стили поля ввода текста */ .form-wrapper input { width: 330px; height: 20px; padding: 10px 5px; float: left; font: bold 15px "lucida sans", "trebuchet MS", "Tahoma"; border: 0; background: #eee; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; } /* Кнопка отправки формы */ .form-wrapper button { overflow: visible; position: relative; float: right; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; color: #fff; text-transform: uppercase; background: #d83c3c; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } .form-wrapper button:hover{ background: #e54040; } .form-wrapper button:active, .form-wrapper button:focus{ background: #c42f2f; outline: 0; } .form-wrapper button:before { /* стрелка влево */ content: ""; position: absolute; border-width: 8px 8px 8px 0; border-style: solid solid solid none; border-color: transparent #d83c3c transparent; top: 12px; left: -6px; } .form-wrapper button:hover:before{ border-right-color: #e54040; } .form-wrapper button:focus:before, .form-wrapper button:active:before{ border-right-color: #c42f2f; } .form-wrapper button::-moz-focus-inner { /* Удаляем дополнительное пространство рядом с кнопкой в Mozilla Firefox */ border: 0; padding: 0; }
В статье описаны особенности верстки поисковой формы сайта, приведен пример семантичной разметки кода, оформление на CSS3, плюс в конце немного магии jQuery.
-
Разметка
До появления HTML5 форма поиска делалась обычным текстовым полем, с постепенным приходом в нашу жизнь новой версии языка разметки для нее появился специальный тип поля search . Так что в HTML коде современного сайта мы можем увидеть что-то вроде этого:
Результат кода в FF, Opera, IE9:
И немного по другому в браузерах на движке вебкит (Chrome, Safari):
Поле поиска в вебкитахКак видите, при фокусе на поле добавляется подсветка, а при вводе текста появляется кнопка очистки, при нажатии на нее содержимое поля удаляется, что само по себе достаточно удобно.
Без CSS оформления наша форма поиска пока выглядит достаточно просто, в этой статье мы попробуем сделать нечто вроде этого:
например: верстка формы поиска
Если не планируется поддержка старых браузеров, пустой несемантичный элемент
можно заменить псевдоэлементом:before .Особенности оформления поисковой формы
Поскольку я решил использовать достаточно много CSS3 свойств, в старых браузерах Internet Explorer эти чудеса работать не будут, и чтобы добиться кроссбраузерности, нужно подключать костыли, что-то делать картинками и т.д.
Первым делом хотелось бы обратить внимание на некоторые особенности, а именно:
- стилизация в браузерах на движке вебкит
- стилизация placeholder
Стили формы поиска в браузерах Chrome, Safari
Добавим к полю с классом.search какой-нибудь стиль:
Search { background: #d8e6ef; border: 1px solid #000; }
Результат на скриншоте:
Search в браузерах FF, Opera, Chrome и SafariКак обычно в браузерах наблюдается шатание и разброд, в Chrome как-то странно работает border (появляются поля, как будто задаем padding), Safari же полностью игнорирует правила. Но есть решение в данной ситуации, добавляем такое правило в CSS-код:
Search { -webkit-appearance: none; }
Теперь в вебкитах все стало нормально, но они все еще отличаются подсветкой полей при фокусе по умолчанию и кнопкой очистки. Эти элементы, хоть часто и бывают удобны, иногда могут портить задумку дизайна и их необходимо отключать. Подсветку убрать очень просто:
Search:focus { outline: none; /* убрали подсветку при фокусе */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow: inset 0 0 2px #000; box-shadow: inset 0 0 2px #000; /* добавили внутреннюю тень в качестве альтернативы для всех браузеров */ }
Остается избавиться от кнопки очистки. На самом деле ее можно легко стилизовать, заменив простой крестик каким-нибудь фоном, позиционировать и т.д., однако в моем примере она будет не нужна:
/* правило только к элементу с классом search */ .search::-webkit-search-cancel-button { display: none; /* убрали кнопку очистки */ } /* или ко всем полям с типом search в документе */ input::-webkit-search-cancel-button { display: none; }
Оформление текстовой подсказки placeholder
К сожалению с текстовой подсказкой все немного сложнее, чем кажется на первый взгляд. Во-первых, она не работает в IE9, не говоря уже о старых браузерах, поэтому в критичных местах, где обязательно изначально нужен какой-то текст в поле, следует использовать JavaScript. Во-вторых, placeholder плохо поддается оформлению в браузерах Firefox, Chrome, Safari и совсем не поддается в Opera:
:-moz-placeholder { color: #304e62; /* изменили цвет в FF */ } ::-webkit-input-placeholder { color: #304e62; /* изменили цвет в вебкитах */ }
Обратите внимание на то что данные селекторы не будут работать, если их перечислять через запятую, каждый должен начинаться с новой строки.
Я рассмотрел особенные моменты, при которых могли возникнуть трудности, остальная часть для более-менее опытного верстальщика проблем вызвать не должна.
Скрипты jQuery
Напоследок добавим немного скриптов нашей форме, а именно:
- сделаем отмену запроса и вывод сообщения об ошибке при отправлении пустого поля
- при фокусе на поле добавим небольшую всплывающую подсказку внизу
Очень просто это все реализовать мощью jQ, у меня получился такой код с комментариями:
$(function() { /* обрабатываем отправку формы */ $(".search-form").submit(function() { var errVal = "пустой запрос"; /* Если поле пустое или содержит значение errVal */ if($(".search").val() == "" || $(".search").val() == errVal) { /* добавить в поле значение errVal, изменить цвет фона и */ $(".search").val(errVal).css({backgroundColor: "rgba(0,0,0,.1)"}); /* возвратить false - форма не отправляется */ return false; }; }); /* при фокусе на поле */ $(".search").focus(function() { /* выставить пустое значение поля, задать цвет фона в изначальный */ $(this).val("").css({backgroundColor: "#d8e6ef"}); /* показать всплывающую подсказку */ $(".notice").fadeIn(400); }); /* при снятии фокуса */ $(".search").blur(function() { /* убрать всплывающую подсказку */ $(".notice").fadeOut(400); }); });
Конечно лучше всего в скрипте заменить классы на идентификаторы для более быстрой работы сценария, да и при появлении других элементов с такими же классами в документе работу скрипта они уже не сломают.
Итоги
Таким образом мы сверстали и запрограммили поисковую форму для сайта, работает в последних версиях Firefox, Chrome, Opera, Safari и IE9+. При большом желании можно сделать более-менее кроссбраузерную версию, начиная хоть с IE6.
Проверено
- Internet Explorer 9+
- Opera
- Firefox
- Chrome
- Safari
Помощь проекту
Одним из наиболее часто используемых элементов любого веб-сайта можно назвать форму поиска. Если вы хотите повысить уровень удобства ее использования на вашем сайте, и в значительной степени облегчить процесс поиска нужного материала, то вам следует всерьез заняться разработкой формы поиска.
Итак, сегодня мы хотим рассказать вам о разработке формы поиска при помощи свойств CSS3.
Ранее вы, вероятно, уже находили руководства, посвященные разработке формы поиска на CSS3, а сегодня мы хотим предложить вам немного другой вариант – форму поиска с эффектом 3D, реализованным за счет параметра box-shadow.
Разметка
Ниже вы можете видеть HTML-код, использованный для разработки данной формы. Учтите, что наполнитель у нас разработан при помощи HTML5, и мы использовали все необходимые атрибуты.
Сначала мы хотели воспользоваться представленным в HTML5 type="search", но затем передумали ввиду несовместимости со многими современными браузерами. Сейчас нам нудно будет добавить несколько дополнительных строчек кода CSS, чтобы переписать исходные значения.
CSS-код
Давайте рассмотрим минимальные стили, используемые для создания красивой формы поиска на CSS3:
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);
}
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;
}
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;
}
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 является полностью готовой к использованию.
Современные браузеры Chrome, Firefox, Safari, Opera, IE10:
Пожалуйста, учтите, что на данный момент Opera поддерживает атрибут наполнителя (placeholder) в HTML5, но его нельзя оформлять.
Хорошая новость состоит в том, что IE10 также поддерживает наполнитель HTML5.
Прежние версии IE (6/7/8):
*
В завершение
Если вы читали наши предыдущие статьи, то наверняка знаете, что здесь мы занимаемся разработкой рабочих приложений (с откатными версиями и без) для всех браузеров. И этот пример – не исключение.
Кроме использования CSS3-формы для создания блока поиска, вы без труда можете адаптировать её под создание формы авторизации или формы подписки.
Поле поиска для сайта — один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте.
В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.
1. Разметка HTML
Элемент
