Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Формы поиска
Формы поиска
AndreyДата: Пятница, 06.12.2013, 12:58:13 | Сообщение # 1
Технарь
Offline
3

Довольно симпатичные формы поиска, с разными цветами кнопок

И так смотрим мой тест на Фиддле

начнём установку, для начала нужно заменить $SEARCH_FORM$ на:
Код
<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>


Идём в 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;     
     }


Синяя кнопка:
Код
.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 #1061B0;     
     width:70px;     
     height:27px;     
     cursor:pointer;     
     background:#36A6FA;     
     border:1px solid #2290e3;     
     color:#fff; font-weight: bold!important;     
     }     
         
     .poick_knopka:hover {background:#3c9fea;}     

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


Серая кнопка:
Код
.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 #505050;     
     width:70px;     
     height:27px;     
     cursor:pointer;     
     background:#F5F5F5;     
     border:1px solid #9E9E9E;     
     color:#9D9D9D; font-weight: bold!important;     
     }     
         
     .poick_knopka:hover {background:#ffffff;}     

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


Фиолетовая кнопка:
Код
.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 #751a9b;    
    width:70px;    
    height:27px;    
    cursor:pointer;    
    background:#ce36fa;    
    border:1px solid #a622e3;    
    color:#fff; font-weight: bold!important;    
}    
       
.poick_knopka:hover {background:#b73cea;}    

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


Красная кнопка:
Код
.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 #b01010;    
    width:70px;    
    height:27px;    
    cursor:pointer;    
    background:#fa3636;    
    border:1px solid #e32222;    
    color:#fff; font-weight: bold!important;    
}    
       
.poick_knopka:hover {background:#ea3c3c;}    

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


Вот и всё! Это только пример, а вы можете настроить под себя

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Формы поиска
Страница 1 из 11
Поиск: