Создаем форму поиска с помощью CSS3

Создаете свой сайт с множеством информации и хотите осуществить привлекательный поиск, который будет удобный посетителям и простой в использовании, при этом иметь стильный дизайн. В этом уроке речь пойдет о создании простой формы поиска средствами CSS3 с применением HTML5 атрибута placeholder. Для того, чтобы оформление было одинаково во всех браузерах, мы будем использовать Modernizr. Мы рассмотрим как создать сам стиль формы, непосредственно средствами CSS, не подключая элементы поиска..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Элемент form используется как контейнер, а 2 остальных элемента как поле для ввода информации и кнопки.

</form>

Вы наверное заметили, что мы используем атрибут placeholder, но это сейчас не важно т.к. мы затронем эту тему позже.

Причина, по которой я вставил столько много id, заключается в том, что я хочу, чтобы данное оформление работало и в старых версиях браузеров.

#searchbox

{

background: #eaf8fc;

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));

-moz-border-radius: 35px;

border-radius: 35px;

border-width: 1px;

border-style: solid;

border-color: #c4d9df #a4c3ca #83afb7;

width: 500px;

height: 35px;

padding: 10px;

margin: 100px auto 50px;

overflow: hidden; /* Clear floats */

}

Ниже вы можете увидеть что у нас получается:

Отметьте: когда вы добавляете элементу float: left, то вам не обязательно приписывать display: block.

#search, #submit

{

float: left;

}

#search

{

padding: 5px 9px;

height: 23px;

width: 380px;

border: 1px solid #a4c3ca;

font: normal 13px 'trebuchet MS', arial, helvetica;

background: #f1f1f1;

-moz-border-radius: 50px 3px 3px 50px;

border-radius: 50px 3px 3px 50px;

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

}

/* ----------------------- */

#submit

{

background: #6cbb6b;

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));

-moz-border-radius: 3px 50px 50px 3px;

border-radius: 3px 50px 50px 3px;

border-width: 1px;

border-style: solid;

border-color: #7eba7c #578e57 #447d43;

-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

height: 35px;

margin: 0 0 0 10px;

padding: 0;

width: 90px;

cursor: pointer;

font: bold 14px Arial, Helvetica;

color: #23441e;

text-shadow: 0 1px 0 rgba(255,255,255,0.5);

}

#submit:hover

{

background: #95d788;

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));

}

#submit:active

{

background: #95d788;

outline: none;

-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;

}

#submit::-moz-focus-inner

{

border: 0; /* Small centering fix for Firefox */

}

Атрибут placeholder предназначен для отображения текста в поле для текста до тех пор, пока на него не нажали. После клика, текст исчезнет, и пользователь может набирать то, что он хочет. Теперь для этих целей нам не нужен JavaScript!

Браузеры, которые поддерживают данный атрибут:

Firefox 3.7+
Safari 4.0+
Chrome 4.0+
Opera 11+

Для тех браузеров, которые поддерживают данную фичу, напишем следующий CSS код:

#search::-webkit-input-placeholder {

color: #9c9c9c;

font-style: italic;

}

#search:-moz-placeholder {

color: #9c9c9c;

font-style: italic;

}

Для тех браузеров, которые ещё или уже не поддерживают атрибут placeholder, мы создаём специальный CSS и Javascript код, который спасёт ситуацию.

Я использую Modernizr для того, чтобы определить поддерживает ли браузер HTML5 атрибут placeholder или нет. Всё что нам понадобится так это написать небольшой фрагмент кода на JavaScript, а Modernizr уже решит в какой момент его задействовать.

#search.placeholder {

color: #9c9c9c !important;

font-style: italic;

}

$(document).ready(function() {

if (!Modernizr.input.placeholder)

{

var placeholderText = $('#search').attr('placeholder');

$('#search').attr('value',placeholderText);

$('#search').addClass('placeholder');

$('#search').focus(function() {

if( ($('#search').val() == placeholderText) )

{

$('#search').attr('value','');

$('#search').removeClass('placeholder');

}

});

$('#search').blur(function() {

if ( ($('#search').val() == placeholderText) || (($('#search').val() == '')) )

{

$('#search').addClass('placeholder');

$('#search').attr('value',placeholderText);

}

});

}

});

Что касается HTML5 атрибута placeholder, то если браузер его не поддерживает, то Javascript вступит в игру и сделает своё дело.

Материал переведен из зарубежного источника. И представлен исключительно в ознакомительных целях.

CSS, Дизайн сайта, Поиск, Разработка сайта

Опубликовал Cooper 23.10.2011 в 22:30, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.