Блог Сергея Князева

Скрипты
Новый вид строки поиска

Новый вид строки поиска

07.05.20166642
Сегодня я решил рассказать читателям моего блога об одном интересном решение для сайта, а именно про новый вид поиска. Я рассмотрел пять различных вариантов. Вы сможете подобрать нужный для вашего проекта. Также в данном решении я расскажу вам, как поставить проверку на ввод символов.

Установка кода

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

Код
<form class="c-wd cf" onsubmit="this.sfSbm.disabled=true" method="get" action="/search/">
  <input type="text" placeholder="Введите запрос..." name="q" maxlength="30" required="">
  <button type="submit" name="sfSbm">Искать</button>
</form>

Если вы устанавливаете поиск впервые, то можете установить данный код в любое место. Например в правый или левый глобальный блок сайта.

Center-WD - Новый вид строки поискаДля тех кому интересно скажу, что проверка на вводимые символы осуществляется с помощью тега required="". Данный тег выведет ошибку "Заполните это поле", если не будет введён поисковой запрос.


Установка CSS

Для начала установим основной CSS код для всех вариантов:

Код
.c-wd{
  width: 296px;
  padding: 7px;
  margin: 0 auto 0 auto;
  }
  .cf {
  zoom: 1;
}
  .c-wd input{
  width: 236px!important;
  height: 16px;
  padding: 7px 5px;
  float: left;
  font: 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
  border: 0;
  background: #eee;
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;  
  }
  .c-wd input:focus{
  width: 234px!important;
  outline: 0;
  background: #fff;
  }
  

Теперь вам необходимо выбрать понравившийся вид поиска и установить дополнительный CSS код:

1 Вариант

Center-WD - Новый вид строки поиска - 1 Вариант
Код
.c-wd button {
  overflow: visible;
  position: relative;
  float: right;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 30px;
  width: 50px;
  font: bold 10px/16px 'lucida sans', 'trebuchet MS', 'Tahoma';
  color: #fff;
  text-transform: uppercase;
  background: #d83c3c;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;  
  text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
  }  
  .c-wd button:hover{  
  background: #e54040;
  }  
  .c-wd button:active,
  .c-wd button:focus{  
  background: #c42f2f;  
  }  
  .c-wd button:before {
  content: '';
  position: absolute;
  border-width: 8px 8px 8px 0;
  border-style: solid solid solid none;
  border-color: transparent #d83c3c transparent;
  top: 7px;
  left: -6px;
  }  
  .c-wd button:hover:before{
  border-right-color: #e54040;
  }  
  .c-wd button:focus:before{
  border-right-color: #c42f2f;
  }  
  .c-wd button::-moz-focus-inner {
  border: 0;
  padding: 0;
  }

2 Вариант

Center-WD - Новый вид строки поиска - 2 Вариант
Код
.c-wd button {
  overflow: visible;
  position: relative;
  float: right;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 30px;
  width: 50px;
  font: bold 10px/16px 'lucida sans', 'trebuchet MS', 'Tahoma';
  color: #fff;
  text-transform: uppercase;
  background: #298A08;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;  
  text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
  }  
  .c-wd button:hover{  
  background: #04B404;
  }  
  .c-wd button:active,
  .c-wd button:focus{  
  background: #04B404;  
  }  
  .c-wd button:before {
  content: '';
  position: absolute;
  border-width: 8px 8px 8px 0;
  border-style: solid solid solid none;
  border-color: transparent #298A08 transparent;
  top: 7px;
  left: -6px;
  }  
  .c-wd button:hover:before{
  border-right-color: #04B404;
  }  
  .c-wd button:focus:before{
  border-right-color: #04B404;
  }  
  .c-wd button::-moz-focus-inner {
  border: 0;
  padding: 0;
  }

3 Вариант

Center-WD - Новый вид строки поиска - 3 Вариант
Код
.c-wd button {
  overflow: visible;
  position: relative;
  float: right;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 30px;
  width: 50px;
  font: bold 10px/16px 'lucida sans', 'trebuchet MS', 'Tahoma';
  color: #fff;
  text-transform: uppercase;
  background: #424242;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;  
  text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
  }  
  .c-wd button:hover{  
  background: #585858;
  }  
  .c-wd button:active,
  .c-wd button:focus{  
  background: #585858;  
  }  
  .c-wd button:before {
  content: '';
  position: absolute;
  border-width: 8px 8px 8px 0;
  border-style: solid solid solid none;
  border-color: transparent #424242 transparent;
  top: 7px;
  left: -6px;
  }  
  .c-wd button:hover:before{
  border-right-color: #585858;
  }  
  .c-wd button:focus:before{
  border-right-color: #585858;
  }  
  .c-wd button::-moz-focus-inner {
  border: 0;
  padding: 0;
  }

4 Вариант

Center-WD - Новый вид строки поиска - 4 Вариант
Код
.c-wd button {
  overflow: visible;
  position: relative;
  float: right;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 30px;
  width: 50px;
  font: bold 10px/16px 'lucida sans', 'trebuchet MS', 'Tahoma';
  color: #fff;
  text-transform: uppercase;
  background: #08088A;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;  
  text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
  }  
  .c-wd button:hover{  
  background: #0404B4;
  }  
  .c-wd button:active,
  .c-wd button:focus{  
  background: #0404B4;  
  }  
  .c-wd button:before {
  content: '';
  position: absolute;
  border-width: 8px 8px 8px 0;
  border-style: solid solid solid none;
  border-color: transparent #08088A transparent;
  top: 7px;
  left: -6px;
  }  
  .c-wd button:hover:before{
  border-right-color: #0404B4;
  }  
  .c-wd button:focus:before{
  border-right-color: #0404B4;
  }  
  .c-wd button::-moz-focus-inner {
  border: 0;
  padding: 0;
  }

5 Вариант

Center-WD - Новый вид строки поиска - 5 Вариант
Код
.c-wd button {
  overflow: visible;
  position: relative;
  float: right;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 30px;
  width: 50px;
  font: bold 10px/16px 'lucida sans', 'trebuchet MS', 'Tahoma';
  color: #fff;
  text-transform: uppercase;
  background: #DBA901;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;  
  text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
  }  
  .c-wd button:hover{  
  background: #FFBF00;
  }  
  .c-wd button:active,
  .c-wd button:focus{  
  background: #FFBF00;  
  }  
  .c-wd button:before {
  content: '';
  position: absolute;
  border-width: 8px 8px 8px 0;
  border-style: solid solid solid none;
  border-color: transparent #DBA901 transparent;
  top: 7px;
  left: -6px;
  }  
  .c-wd button:hover:before{
  border-right-color: #FFBF00;
  }  
  .c-wd button:focus:before{
  border-right-color: #FFBF00;
  }  
  .c-wd button::-moz-focus-inner {
  border: 0;
  padding: 0;
  }


На этом всё. Пользуйтесь данным решением и улучшайте свой сайт.
P.S. Если возникнут проблемы с установкой спрашивайте в комментариях.
Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (2)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Андрей 09.02.2017 в 16:08Спам
Очень интересный вид поиска, единственное, можно ли как-то убрать эффект "падения" кнопки при клике в строке поиска?
2
Конечно можно, необходимо просто подогнать по пикселям к вашему дизайну. Пример работы в демо можно посмотреть.
1