Перейти к публикации
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble
VAOZ

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

Рекомендованные сообщения

 

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;}
Изменено пользователем VAOZ

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×