Создание крутого поля для поиска на CSS3

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

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

HTML
<form id="searchbox" action="">
    <input id="search" type="text" placeholder="Введите текст">
    <input id="submit" type="submit" value="Search">
</form>

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

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

CSS
#searchbox
{
        background: #eaf8fc;
        background-image: -moz-linear-gradient(#fff, #d4e8ec);
        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: -moz-linear-gradient(#95d788, #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: -moz-linear-gradient(#6cbb6b, #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 */
}


HTML5 атрибут placeholder
Атрибут 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 вступит в игру и сделает своё дело.
Теги:
поле, поиск, CSS3
Добавлено: 26 Апреля 2018 07:12:33 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...