Адаптивная форма поиска в стиле FLAT
Опубликовано 02.02.2016 в 20:10
Решил выложить свою форму поиска, помню еще давно и на другом сайте пытался сделать ее адаптивной, чтоб все было ровно и четко - но как то не получалось, и приходилось создавать дополнительные блоки. Но со временем как-то лучше видимо стал разбираться в верстке и таки сделал ее адаптивной, и без лишних блоков. Я не претендую на какую-то гениальность, наоборот все неприлично просто, но может кому-то это будет полезно.
А главной проблемой было то, что я использовал рамки для полей, толщина которых задается в пикселях, а не в процентах - как размеры полей. И именно из-за фиксированной ширины рамок, толщина которых прибавляется к размерам полей, во время растягивания - вся форма становилась меньше родительского блока, а во время сжатия - наоборот, становилась больше и выходила за ее пределы. В общем рамки пришлось убрать, но собственно без них - это даже больше соответствует канонам плоского дизайна. К тому же их все же можно добавить, но не параметром border, а box-shadow. Так же у полей должны быть нулевые значения параметров padding и margin, т.к они тоже добавляются к их размерам, вместо них отступ от левого края я задал в самой форме.
Ладно, наверное слишком большое предисловие для какой-то формы поиска, но думаю полным чайникам - это тоже может быть полезно. Перейдем к установке.
Установка :
1.Устанавливаем в нужное место саму форму поиска:
2.Прописываем стили:
Ширина у формы поиска не задана, ведь она у нас адаптивная и должна ровняться ширине родительского блока или контейнера. Но если надо, ее можно задать для атрибута .srchfrm, фиксированную или в процентах, а поля в ней в любом случае будут изменятся в соответствии с заданными значениями (80% - поле поиска, 20% - кнопка).
Мне нравится (3)
А главной проблемой было то, что я использовал рамки для полей, толщина которых задается в пикселях, а не в процентах - как размеры полей. И именно из-за фиксированной ширины рамок, толщина которых прибавляется к размерам полей, во время растягивания - вся форма становилась меньше родительского блока, а во время сжатия - наоборот, становилась больше и выходила за ее пределы. В общем рамки пришлось убрать, но собственно без них - это даже больше соответствует канонам плоского дизайна. К тому же их все же можно добавить, но не параметром border, а box-shadow. Так же у полей должны быть нулевые значения параметров padding и margin, т.к они тоже добавляются к их размерам, вместо них отступ от левого края я задал в самой форме.
Ладно, наверное слишком большое предисловие для какой-то формы поиска, но думаю полным чайникам - это тоже может быть полезно. Перейдем к установке.
Установка :
1.Устанавливаем в нужное место саму форму поиска:
Код
<form class="srchfrm" onsubmit="this.sfSbm.disabled=true" method="get" action="/search/">
<input class="srchfld" name="q" placeholder="Поиск..." type="text">
<input class="srchbtn" onclick="this.sfSbm.disabled=true" name="sfSbm" value="OK" type="submit">
</form>
<input class="srchfld" name="q" placeholder="Поиск..." type="text">
<input class="srchbtn" onclick="this.sfSbm.disabled=true" name="sfSbm" value="OK" type="submit">
</form>
2.Прописываем стили:
Код
.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;}
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% - кнопка).