.
Чем отличается
Чем отличается ? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.
Текст в поля формы можно добавлять двумя способами:
Input::-webkit-input-placeholder {
color: #B6C0A5;
font-style: italic;
background: #E0EFCA;
}
input:-moz-placeholder {
color: #B6C0A5;
font-style: italic;
background: #E0EFCA;
}
input:-ms-input-placeholder {
color: #B6C0A5;
font-style: italic;
background: #E0EFCA;
}
2)
Input {
color: white;
}
Для отображения иконок не забудьте подключить .
2. Поле поиска с кнопкой-иконкой
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input {
width: 100%;
height: 42px;
padding-left: 10px;
border: 2px solid #7BA7AB;
border-radius: 5px;
outline: none;
background: #F9F0DA;
color: #9E9C9C;
}
button {
position: absolute;
top: 0;
right: 0px;
width: 42px;
height: 42px;
border: none;
background: #7BA7AB;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
3. Поле поиска с кнопкой внутри
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input, button {
border: none;
outline: none;
border-radius: 3px;
}
input {
width: 100%;
height: 42px;
background: #F9F0DA;
padding-left: 15px;
}
button {
height: 26px;
width: 26px;
position: absolute;
top: 8px;
right: 8px;
background: #F15B42;
cursor: pointer;
}
button:before {
content: "\f105";
font-family: FontAwesome;
color: #F9F0DA;
font-size: 20px;
font-weight: bold;
}
4. Поле поиска в стиле «flat»
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
background: #A3D0C3;
}
input, button {
border: none;
outline: none;
background: transparent;
}
input {
width: 100%;
height: 42px;
padding-left: 15px;
}
button {
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
5. Поле поиска с толстой нижней границей
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
background: #F9F0DA;
border-bottom: 4px solid #be290e;
}
input, button {
border: none;
outline: none;
background: transparent;
}
input {
width: 100%;
height: 42px;
padding-left: 15px;
}
button {
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
button:before {
content: "\f178";
font-family: FontAwesome;
font-size: 20px;
color: #be290e;
}
6. Поле поиска с меняющимся цветом границы
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input, button {
outline: none;
background: transparent;
}
input {
width: 100%;
height: 42px;
padding-left: 15px;
border: 3px solid #F9F0DA;
}
button {
border: none;
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
input:focus {
border-color: #311c24;
}
7. Выезжающее поле поиска
Поле поиска появляется при нажатии на кнопку с иконкой.
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
height: 42px;
}
input {
height: 42px;
width: 0;
padding: 0 42px 0 15px;
border: none;
border-bottom: 2px solid transparent;
outline: none;
background: transparent;
transition: .4s cubic-bezier(0, 0.8, 0, 1);
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
input:focus {
width: 300px;
z-index: 1;
border-bottom: 2px solid #F9F0DA;
}
button {
background: #683B4D;
border: none;
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
8. Увеличивающееся в ширину поле поиска
* {box-sizing: border-box;}
form {
width: auto;
float: right;
margin-right: 30px;
}
input {
width: 250px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid #324b4e;
background: #F9F0DA;
outline: none;
position: relative;
transition: .3s linear;
}
input:focus {
width: 300px;
}
button {
width: 42px;
height: 42px;
background: none;
border: none;
position: absolute;
top: -2px;
right: 0;
}
button:before{
content: "\f002";
font-family: FontAwesome;
color: #324b4e;
}
Одним из наиболее часто используемых элементов любого веб-сайта можно назвать форму поиска. Если вы хотите повысить уровень удобства ее использования на вашем сайте, и в значительной степени облегчить процесс поиска нужного материала, то вам следует всерьез заняться разработкой формы поиска.
Итак, сегодня мы хотим рассказать вам о разработке формы поиска при помощи свойств CSS3.
Ранее вы, вероятно, уже находили руководства, посвященные разработке формы поиска на CSS3, а сегодня мы хотим предложить вам немного другой вариант – форму поиска с эффектом 3D, реализованным за счет параметра box-shadow.
Разметка
Ниже вы можете видеть HTML-код, использованный для разработки данной формы. Учтите, что наполнитель у нас разработан при помощи HTML5, и мы использовали все необходимые атрибуты.
Сначала мы хотели воспользоваться представленным в HTML5 type="search", но затем передумали ввиду несовместимости со многими современными браузерами. Сейчас нам нудно будет добавить несколько дополнительных строчек кода CSS, чтобы переписать исходные значения.
CSS-код
Давайте рассмотрим минимальные стили, используемые для создания красивой формы поиска на CSS3:
Form-wrapper {
Form-wrapper #search {
Form-wrapper #search:focus {
Form-wrapper #search::-webkit-input-placeholder {
Form-wrapper #search:-moz-placeholder {
Form-wrapper #search:-ms-input-placeholder {
Form-wrapper #submit {
Form-wrapper #submit:hover,
Form-wrapper #submit:active {
Form-wrapper #submit::-moz-focus-inner {Браузерная поддержка
Ниже вы можете видеть некоторые скриншоты, на которых показана наша форма поиска. Вы должны заметить, что она также отлично ведёт себя, если страница открывается в старой версии браузера. Также хочется добавить, что данная поисковая форма на CSS3 является полностью готовой к использованию.
Современные браузеры Chrome, Firefox, Safari, Opera, IE10:
Хорошая новость состоит в том, что IE10 также поддерживает наполнитель HTML5.
Прежние версии IE (6/7/8):
В завершение
Если вы читали наши предыдущие статьи, то наверняка знаете, что здесь мы занимаемся разработкой рабочих приложений (с откатными версиями и без) для всех браузеров. И этот пример – не исключение.
Кроме использования CSS3-формы для создания блока поиска, вы без труда можете адаптировать её под создание формы авторизации или формы подписки.
В статье описаны особенности верстки поисковой формы сайта, приведен пример семантичной разметки кода, оформление на CSS3, плюс в конце немного магии jQuery.
Разметка
До появления HTML5 форма поиска делалась обычным текстовым полем, с постепенным приходом в нашу жизнь новой версии языка разметки для нее появился специальный тип поля search . Так что в HTML коде современного сайта мы можем увидеть что-то вроде этого:
Результат кода в FF, Opera, IE9:
И немного по другому в браузерах на движке вебкит (Chrome, Safari):
Поле поиска в вебкитах
Как видите, при фокусе на поле добавляется подсветка, а при вводе текста появляется кнопка очистки, при нажатии на нее содержимое поля удаляется, что само по себе достаточно удобно.
Без CSS оформления наша форма поиска пока выглядит достаточно просто, в этой статье мы попробуем сделать нечто вроде этого:
Если не планируется поддержка старых браузеров, пустой несемантичный элемент
можно заменить псевдоэлементом:before .
Особенности оформления поисковой формы
Поскольку я решил использовать достаточно много CSS3 свойств, в старых браузерах Internet Explorer эти чудеса работать не будут, и чтобы добиться кроссбраузерности, нужно подключать костыли, что-то делать картинками и т.д.
Первым делом хотелось бы обратить внимание на некоторые особенности, а именно:
Стили формы поиска в браузерах 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
Помощь проекту
Меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.
Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал «по-старому».
В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.
Пример того, что получится в результате, можно .
Что мы теряем при верстке данной формы с помощью HTML5 и CSS3 IE9 и ниже — не увидим текст по умолчанию (атрибут placeholder). IE8 и ниже — не увидим закругленных углов и внутренних теней. IE7 — для него приходится указать другую ширину формы, т.к. он не поддерживает свойство box-sizing . IE6 — а его вообще в расчет не берем =)
В остальных современных браузерах все замечательно. Я считаю, что вышеуказанные недостатки не критичны, поэтому для своего сайта я бы смело использовал форму, сверстанную по последним технологиям.
HTML-код формы поиска Выглядит он вот так:
По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией HTML5:
Атрибут type="text" заменен type="search" . Инлайновый скрипт заменен на placeholder="поиск" .
CSS-код Вот все необходимые стили с комментариями:
Search {
/* устанавливаем необходимую ширину формы в зависимости от дизайна
** форма без проблем растягивается */
width: 35%;
/* кнопку отправки будем позиционировать абсолютно,
** поэтому необходимо это свойство */
position: relative;
}
.search input {
/* отключаем бордюры у инпутов */
border: none;
}
/* стили для поля ввода */
.search .input {
/* растягиваем поле ввода на всю ширину формы */
width: 100%;
/* за счет верхнего (8px) и нижнего (9px) внутренних отступов
** регулируем высоту формы
** внутренний отступ справа (37px) делаем больше левого,
** т.к. там будет размещена кнопка отправки */
padding: 8px 37px 9px 15px;
/* чтобы ширина поля ввода (100%) включала в себя внутренние отступы */
-moz-box-sizing: border-box;
box-sizing: border-box;
/* добавляем внутренние тени */
box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
/* закругляем углы */
border-radius: 20px;
background: #EEE;
font: 13px Tahoma, Arial, sans-serif;
color: #555;
outline: none;
}
/* меняем оформление поля ввода при фокусе */
.search .input:focus {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
background: #E8E8E8;
color: #333;
}
/* оформляем кнопку отправки */
.search .submit {
/* позиционируем кнопку абсолютно от правого края формы */
position: absolute;
top: 0;
right: 0;
width: 37px;
/* растягиваем кнопку на всю высоту формы */
height: 100%;
cursor: pointer;
background: url(https://lh4.googleusercontent.com/-b-5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go.png) 50% no-repeat;
/* добавляем прозрачность кнопке отправки */
opacity: 0.5;
}
/* при наведении курсора меняем прозрачность кнопки отправки */
.search .submit:hover {
opacity: 0.8;
}
/* данное свойство необходимо для того, чтобы в браузерах
** Chrome и Safari можно было стилизовать инпуты */
input {
-webkit-appearance: none;
}
И стили для IE ниже 9-й версии:
/* задаем отдельные стили для браузеров IE ниже 9-й версии */
*+html .search {
/* для IE7 подгоняем ширину под другие браузеры и добавляем правый
** внутренний отступ, чтобы кнопка отправки встала на свое место */
width: 28%;
padding: 0 52px 0 0;
}
.search .input {
border: 1px solid #DFDFDF;
border-top: 1px solid #B3B3B3;
padding-top: 7px;
padding-bottom: 8px;
}
.search .input:focus {
border: 1px solid #CFCFCF;
border-top: 1px solid #999;
}
.search .submit {
filter: alpha(opacity=50);
}
.search .submit:hover {
filter: alpha(opacity=80);
}
P.S.
Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.
