Добавить в избранное

Стильное поле поиска на CSS3

Дата: 2012-08-13

Поле поиска, вероятно, является одним из распространенных элементов интерфейса пользователя. Работая над уровнем удобства интерфейса очень часто возникает желание добавить стильное поле поиска. В данном уроке мы создадим такой популярный элемент с помощью псевдо-элементов.

Разметка HTML

Для подготовки такого поля разметка будет минимальна.

 


Здесь используются специальные атрибуты HTML5 placeholder и required:

  • placeholder- данный атрибут задает вывод текста в поле перед тем, как поле получит фокус ввода, затем текст скрывается.
  • required- данный атрибут задает обязательное условие наличие информации в поле ввода перед отправкой формы.

HTML5 также имеет новое значение для атрибута typetype="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;
}    

Просмотров: 1932

Последние 5 уроков

Стильное поле поиска на CSS3

Поле поиска, вероятно, является одним из распространенных элементов интерфейса пользователя. Работая над уровнем удобства интерфейса очень часто возникает желание добавить стильное поле поиска. В данном уроке мы создадим такой популярный элемент с помощью псевдо-элементов.


Как с помощью CSS сделать фон на всю страницу?

Из этого урока Вы узнаете как сделать фон на всю страницу, при этом Вам будет не важно, какое разрешение на мониторе того посетителя, который будет смотреть Ваш сайт.


Смена фона блока информации при наведении мыши

Интересный эффект смены фона блока с текстом при наведении мыши. Реализовано с помощью HTML+CSS.


Как сделать красивую полосу прокрутки на Вашем сайте?

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


Делаем красивые CSS списки для сайта

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


Видео уроки по php,jquery,ajax,css,html,сео