Если человек не предпринимает попытки сделать больше, чем он может, то ему никогда не удастся сделать все, на что он способен.Henry Drummond ©
Пять цветовых вариантов формы поиска (DMsearch v.1.0)
1405 | 
(20) Здравствуйте дорогие читатели моего блога, в этой статье я предлагаю вам заменить стандартную форму поиска uCoz, на более привлекательную и правильную с точки зрения юзабилити форму поиска DMsearch v.0.1, которая версталась под DOCTYPE 1.1
Шаг 1 установка кода:
Для начало, нам следует удалить старый код формы поиска uCoz
HTML-Code
Code
$SEARCH_FORM$
и за место него установить следующий html код:
HTML-Code
Code
<form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" > <input class="poick_pole"type="text" name="q" maxlength="30" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/><input class="poick_knopka" type="submit" value="Найти" /><input type="hidden" name="t" value="0" /> </form>
теперь нам осталось выбрать нужный css стиль нашей формы поиска, я решил создать пять вариантов стилизации данной формы поиска, чтобы каждый пользователь мог выбрать ту или иную форму поиска под свою цветовую гамму сайта.
Вариант № 1 White (Белый):
CSS-Code
Code
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#f6f6f6;
border: 1px solid #d6d6d6;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#e9e9e9;
border:1px solid #d6d6d6;
}
.poick_knopka:hover{
background:#d6d6d6;
}
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#f6f6f6;
border: 1px solid #d6d6d6;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#e9e9e9;
border:1px solid #d6d6d6;
}
.poick_knopka:hover{
background:#d6d6d6;
}
Вариант № 2 Black (Чёрный):
CSS-Code
Code
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#a7a7a7; text-shadow: 1px 1px 1px #252525;
height:16px;
margin:0;
padding:4px;
background:#484848;
border: 1px solid #252525;
border-right: none;
}
.poick_pole:focus {
background:#545454;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#a7a7a7; text-shadow: 1px 1px 1px #252525;
height:26px;
margin:0;
padding:0 7px;
background:#545454;
border:1px solid #252525;
}
.poick_knopka:hover {
background:#252525;
}
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#a7a7a7; text-shadow: 1px 1px 1px #252525;
height:16px;
margin:0;
padding:4px;
background:#484848;
border: 1px solid #252525;
border-right: none;
}
.poick_pole:focus {
background:#545454;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#a7a7a7; text-shadow: 1px 1px 1px #252525;
height:26px;
margin:0;
padding:0 7px;
background:#545454;
border:1px solid #252525;
}
.poick_knopka:hover {
background:#252525;
}
Вариант № 3 Orange (Оранжевый):
CSS-Code
Code
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#fff0e1;
border: 1px solid #ffa24a;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#fff; text-shadow: 1px 1px 1px #ff891a;
height:26px;
margin:0;
padding:0 7px;
background:#ffc793;
border:1px solid #ffa24a;
}
.poick_knopka:hover{
background:#ffaa59;
}
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#fff0e1;
border: 1px solid #ffa24a;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#fff; text-shadow: 1px 1px 1px #ff891a;
height:26px;
margin:0;
padding:0 7px;
background:#ffc793;
border:1px solid #ffa24a;
}
.poick_knopka:hover{
background:#ffaa59;
}
Вариант № 4 Blue (Синий):
CSS-Code
Code
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#4684a8; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#eff3f7;
border: 1px solid #84ABC2;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#4684a8; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#AFD5EB;
border:1px solid #84ABC2;
}
.poick_knopka:hover {
background:#88b9d6;
}
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#4684a8; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#eff3f7;
border: 1px solid #84ABC2;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#4684a8; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#AFD5EB;
border:1px solid #84ABC2;
}
.poick_knopka:hover {
background:#88b9d6;
}
Вариант № 5 Green (Зелёный):
CSS-Code
Code
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#449040; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#cdf6ce;
border: 1px solid #48b543;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#449040; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#8bdc87;
border:1px solid #48b543;
}
.poick_knopka:hover {
background:#59bd54;
}
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#449040; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#cdf6ce;
border: 1px solid #48b543;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#449040; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#8bdc87;
border:1px solid #48b543;
}
.poick_knopka:hover {
background:#59bd54;
}
на этом всё, удачных вам поисков на вашем сайте...
- Источник:http://www.center-dm.ru
- Вольный перевод:--------------------
Ваша оценка новости
Теги:
20 | cheremburu пишет: | 23.02.2012 | 18:12 0
странно вот только сейчас заметил, эфект нажатия кнопки работает только в Опере, а в Мозила и Хром нет. Эт у всех так или только у меня?
Цитировать
19 | cheremburu пишет: | 23.02.2012 | 03:01 0
вот сюда вот
добавил вот такую строчку
получилось вроде симпотично
Code
.poick_os input {
vertical-align:middle;
}
vertical-align:middle;
}
добавил вот такую строчку
Code
box-shadow:0px 0px 0px; #fff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
получилось вроде симпотично
16 | Andrew пишет: | 05.02.2012 | 12:26 0
хотел спросить, при на жатии поля "Поиск..." текст исчезает. а потом когда я нажимаю на боди обратно мышкой текст "Поиск..." не появляется. не подскажите пожалуйста это у меня проблема или что то другое? и как решить заранее спасибо 
17 | 3loY пишет: | 05.02.2012 | 23:56 +1
Он и не появится так как нет события onBlur.
Попробуй это:
Вместо этого:
Попробуй это:
Quote
<input class="poick_pole" type="text" name="q" maxlength="30" value='Поиск...' onfocus="javascript:if(this.value=='Поиск...'){this.value=''}" onblur="javascript:if(this.value==''){this.value='Поиск...'}"/>
Вместо этого:
Quote
<input class="poick_pole"type="text" name="q" maxlength="30" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>
13 | tema пишет: | 06.01.2012 | 20:50 0
Очень странно, но я попробовал на всех стандартных шаблонах ucoz и не на одном правильно не отображается! Почему то остается старый вид(((( Вроде делаю все правильно и не такой профан...CSS в таблицу стилей, html на нужную страницу...но ничего не получилось
Ответ: 100% решение проблемы ниже
14 | RuleZ-DM пишет: | 07.01.2012 | 02:10 0
значит в шаблоне css стоит более приоритетный стиль значения input:
тут два варианта решения:
- удалять старый код и писать свой с нуля под свой дизайн
- прописать в css стилях нужным классам и идам, параметр !important;
тут два варианта решения:
- удалять старый код и писать свой с нуля под свой дизайн
- прописать в css стилях нужным классам и идам, параметр !important;
Code
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif!important;
color:#449040!important;
text-shadow: 1px 1px 1px #fff!important;
height:26px!important;
margin:0!important;
padding:0 7px!important;
background:#8bdc87!important;
border:1px solid #48b543!important;
}
font:11px Verdana,Arial,Helvetica,sans-serif!important;
color:#449040!important;
text-shadow: 1px 1px 1px #fff!important;
height:26px!important;
margin:0!important;
padding:0 7px!important;
background:#8bdc87!important;
border:1px solid #48b543!important;
}
11 | Артём пишет: | 03.01.2012 | 23:36 0
Админ подскажи! Ставлю эту форму поиска прописываю все в CSS и html но почему то дизайн поиска остается тот же! В чем может быть проблема?
12 | RuleZ-DM пишет: | 06.01.2012 | 15:14 0
- возможно ты прописал css стили не в тот файл
- почисти кэша и cookie в браузоре
- почисти кэша и cookie в браузоре
10 | RuleZ-DM пишет: | 20.12.2011 | 17:18 0
Какую ещё длину ты собрался менять? Существует ширина (width)и высота (height)
6 | valishking пишет: | 15.12.2011 | 16:52 0
По моему использовать "placeholder" практичнее чем "onclick="if (this.value=='Поиск...'){this.value='';}""
Ну это лично мое мнение (:
Ну это лично мое мнение (:
8 | 3loY пишет: | 15.12.2011 | 17:44 +1
Заменять пару строк JS на 2-е библиотеки jQuery + скрипт весом в ~5 кб - это есть практично?
Ну разве что для сайта который состоит из одних только input`s и textarea`s (:
Ну разве что для сайта который состоит из одних только input`s и textarea`s (:
4 | mOnst3R пишет: | 06.12.2011 | 18:37 0
Там ошибка во всех, кроме чёрного, высота поля там 16px, а не 26px, как должно быть
5 | RuleZ-DM пишет: | 09.12.2011 | 01:06 0
Во-первых, какой у тебя на сайте DOCTYPE?
Во-вторых, в css стилях проверь значения
возможно у тебя прописаны внутренние отступы...
Во-вторых, в css стилях проверь значения
Code
input {}
1-10 11-12
