Как изменить дизайн "формы поиска"?

голоса: +4
Здравствуйте товарищи сайтостроители. У меня такой вот вопрос, как можно изменить дизайн формы поиска, чтобы например кнопка найти и текстовое поле были определенного шрифта и цвета. Тоесть как из простой формы поиска сделать красивую форму поиска?
Адрес сайта http://lpsnr.international/
| Автор: | Категория: Поиск по сайту
Редактирование | | Автор: Владислав Вершинников

Ответов: 1

голоса: +6
 
Лучший ответ

Для начала находим у себе в шаблоне системную переменную отвечающую за вывод формы поиска и удаляем ее:

$SEARCH_FORM$

Вместо нее теперь устанавливаем следующий html код формы поиска:

<form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >  
  <input class="poick_pole" type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>  
  <input class="poick_knopka" type="submit" value="Найти" />  
  <input type="hidden" name="t" value="0" />  
  </form>
Шаг 2 - Установка CSS

Теперь придаем нашей форме поиска ucoz красоты и соответствующего цвета, выбирайте нужный. А вставлять стиль нужно: П.У - Дизайн - Управление дизайном(CSS) и в самый низ.

Оранжевая кнопка поиска

/* Форма поиска оранжевая кнопка ----------*/  
  .poick_os {  
  float:left;  
  padding:4px;  
  width:300px;  
  background:#fff;  
  border: 1px solid #A0A8AC;  
  }  

  .poick_os input {  
  float:left;  
  margin:0px;  
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;  
  }  

  .poick_pole {  
  color:#555;  
  width:220px;  
  height:15px;  
  border:none;  
  padding:6px 4px;  
  }  
   
  .poick_knopka {  
  text-shadow: 1px 1px 1px #865520;  
  width:70px;  
  height:27px;  
  cursor:pointer;  
  background:#e1954a;  
  border:1px solid #c97639;  
  color:#fff; font-weight: bold!important;  
  }  
   
  .poick_knopka:hover {background:#d48347;}  

  .poick_os,  
  .poick_knopka {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  }

Редактируйте под себя.

| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
https://yadi.sk/i/is9Oa1w6eMsdL
Вот ссылка,там я кратко изложил что нужно сделать.
Вставить в блок:

<div class="searchForm">
<form onSubmit="this.sfSbm.disabled=true" method="post" style="margin:0px" action="http://site.ucoz.ru/news/">
<input type="text" name="query" class="s_field"/>
<input type="submit" class="button" name="sfSbm" value="Поиск!"/>
<input type="hidden" name="a" value="14" />
</form>
</div>

Вставить таблицу стилей css:

div.searchForm {
text-align: center!important;
}

Дальше сами сможете?

1. http://site.ucoz.ru/news/ - раздел поиска на вашем сайте, там где пользователи будут искать.
1. class="s_field" - стиль самой формы поиска.
2. class="button" - стиль кнопки поиска.
3. value="Поиск!" - текст на кнопке поиска.
Я попробую и потом напишу сообщение, спасибо вам Юрий.
Сделал по центру строго,настроил ссылку, теперь главный финал, как задать стиль поля поиска и сделать стиль для кнопки(вставить за место кнопки мою кнопку),какой код нужен?
http://lpsnr.international/ - мой сайтик
Это в блоке

<div class="searchForm">
<form onSubmit="this.sfSbm.disabled=true" method="post" style="margin:0px" action="http://site.ucoz.ru/news/">
<input type="text" name="query" class="s_field"/>
<input type="submit" class="button" name="sfSbm" value="Поиск!"/>
<input type="hidden" name="a" value="14" />
</form>
</div>

Замените на это

<div class="searchForm">
<form onSubmit="this.sfSbm.disabled=true" method="post" style="margin:0px" action="http://site.ucoz.ru/news/">
<input type="text" name="query" class="s_field"/>
<input type="submit" class="button" name="sfSbm" value="Поиск!" style="background: #05FFFF;
border: 0px;
height: 30px;"/>
<input type="hidden" name="a" value="14" />
</form>
</div>
...