Адаптивная форма поиска в стиле FLAT

2965 просмотров Alan_Writer 17.01.2016

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

А главной проблемой было то, что я использовал рамки для полей, толщина которых задается в пикселях, а не в процентах - как размеры полей. И именно из-за фиксированной ширины рамок, толщина которых прибавляется к размерам полей, во время растягивания - вся форма становилась меньше родительского блока, а во время сжатия - наоборот, становилась больше и выходила за ее пределы. В общем рамки пришлось убрать, но собственно без них - это даже больше соответствует канонам плоского дизайна. К тому же их все же можно добавить, но не параметром border, а box-shadow. Так же у полей должны быть нулевые значения параметров padding и margin, т.к они тоже добавляются к их размерам, вместо них отступ от левого края я задал в самой форме.

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

Установка

Устанавливаем в нужное место саму форму поиска:

Код

Прописываем стили:

Код

.srchfrm {
  padding:0 0 0 8px;
  background:#CCC;
  height:36px;}

.srchfld,.srchbtn {
  height:36px;
  border:0 none;
  padding:0;
  margin:0;}

.srchfld {
  width:80%;
  background:#CCC;
  font-size:12px;
  float:left;}

.srchbtn {
  width:20%;
  background:#4B8FC2;
  color:#FFF;
  cursor:pointer;
  float:right;}

.srchbtn:hover {
  opacity:0.8;}

Ширина у формы поиска не задана, ведь она у нас адаптивная и должна ровняться ширине родительского блока или контейнера. Но если надо, ее можно задать для атрибута .srchfrm, фиксированную или в процентах, а поля в ней в любом случае будут изменятся в соответствии с заданными значениями (80% - поле поиска, 20% - кнопка).

Все епты.

Теги: форма поиск, Адаптивная, flat