Как сделать красивую форму для поиска

Как сделать красивую форму для поискаСегодня мы попробуем сделать с вами красивую объёмную строку поиска только при помощи CSS3. Объём форме мы придадим при помощи теней, цвета были подобранные серые и синие, так что они должны подойти для любого светлого дизайна.

Сначала опишем нашу форму при помощи HTML5. Нам необходимые следующие атрибуты этой новой спецификации: placeholder и required.

Также мы не будем использовать стандартный тип поля поиск (type="search") т.к. у нас могут возникнуть некоторые проблемы с корректным отображением поля в Iexplorer.

Наш HTML код выглядит следующим образом.

<form class="form-wrapper">
        <input type="text" id="search" placeholder="Search for CSS3, HTML5, jQuery ..." required>
        <input type="submit" value="go" id="submit">
</form>

И CSS стили, я думаю объяснять каждую строчку не надо. Так как и так из рисунка понятно, что нам нужен прямоуольник с закруглёнными углами, его фон монотонный, светло-серый, небольшая тень снизу и слева. Для кнопки мы используем градиент, а для основного поля ввода мы выбрали фон — белый цвет и небольшую внутреннюю тень.

И так описание стиля.

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

Конечно же, в браузере IE, а  именно в IE6, IE7 и IE8 вы не увидите должного эффекта, но это будет просто прямоугольная форма без каких-либо дефектов. Во всех остальных браузерах эффект будет работать нормально.



3 комментария на «“Как сделать красивую форму для поиска”»

  1. Настасья:

    Очень интересная статья!
    Еще мне очень понравился как устроен поиск на вашем блоге (встроен в меню) не могли бы вы рассказать о таком способе подробнее?

    • admin:

      Верхний поиск не совсем встроен в меню, просто он располагается в верхней части шапки. Если у вас сайт на wordpress то вы можете вставить его вручную, найдя файл header.php, предварительно добавив специальные стили в файл style.css, которые не дадут съехать всему дизайну

  2. Alexander:

    Подскажите а где вставить ссылку для поиска /advanced_search_result.php?keywords=, что бы когда нажимаешь найти он сюда /advanced_search_result.php?keywords= подставлял текст который ввёл чкеловек.

    Спасибо

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

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