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

[VAOZ]

 

Установка 

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

<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>

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

.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;}

Изменено 16 апреля, 2018 пользователем VAOZ