Данная функция обычно используется в фотоальбомах uCoz или просто для просмотра изображений. В нашем случае при помощи uCoz классов, а именно ulightbox мы выведем форму поиска.
* Выложил на форуме, так как мб такой вид уже есть.
CSS
Код
.search .searchForm {position:relative;width:800px}
.search .searchForm input {width:98px;height:98px;line-height:100px;font-size:25pt;padding:0 20px;margin-bottom:0;width:100%;outline:none;border:none !important}
.search .searchForm .schBtn {position:absolute;right:0;top:0;border-left:1px solid #ddd}
.search .searchForm .schBtn input{background-color:transparent;width:100px}
.searchSbmFl[type="submit"] {
width:34px;
height:100%;
border:none;
text-indent:-9999px;
margin:0;
padding:0;
background-image:url('иконка с лупой');
background-repeat:no-repeat;
background-position:50% 50%;
background-size:50%;
overflow:hidden;
}
.searchSbmFl:hover,.searchSbmFl:active {background-color:transparent}
Кнопка вызова
Код
<a class="ulightbox" href="#search">Начать поиск по сайту</a>
Разметка (форма)
Код
<div id="search" class="search" style="display:none">
<div class="searchForm">
<form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"><div align="center"><input type="text" name="q" maxlength="30" size="20" class="queryField" /></div><div align="center" class="schBtn"><input type="submit" class="searchSbmFl" name="sfSbm" value="Найти" /></div></form>
</div>
</div>
Демо для тех, кому не ясна функция DEMO.
