Jump to content

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


VAOZ
 Share


Recommended Posts

 

5ad4ff5f97fec_FLAT.jpg.2bd8c0f72585356aadeae408f8b33ed6.jpg

Установка 

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

<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;}
Edited by VAOZ
Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share


×
×
  • Create New...