Вариантов оформления самого окна поиска, достаточно много. Сегодня хочу предложить ещё один - окно поиска в полноэкранном варианте. При нажатии вся форма поиска откроется на всю страницу. Сам по себе код стандартный, но мы добавим в стили элемент прозрачности, используя свойство opacity:0.8;. Это придаст ему более элегантный и современный стиль. Плюс ещё сделаем кнопку "ЗАКРЫТЬ", опять же, для удобства .
Основные особенности
В блоге устанавливается достаточно просто - в гаджет HTML/JavaScript
Без подключения сторонних библиотек и JavaScript
Настраиваемые стили CSS
Быстрая загрузка
Работает со всеми браузерами
В работе его можно проверить на тестовом блоге в сайдбаре. Введите, допустим, слово БЛОК.
Код
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form {
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"] {
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #2EB0EC;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<style>
#popup_searchBox {position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999;}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;}
#popup_searchBox_Data{position:absolute;top:50%;left:50%;width:300px;height:100px;margin:-50px 0 0 -150px;color:#FFFFFF;z-index:9999;}
</style>
<style>
.search-form-wrapper{background:#000;background:rgba(0,0,0,.8);z-index:99;position:fixed;width:100%;height:100%;left:0;top:0;display:none}.search-form,.search-form-label,.search-form-overlay,.search-text{position:absolute;left:0}.search-form{width:100%;height:1px;top:40%;text-align:center}.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}.search-text{top:100%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;color:#fff;text-align:center;outline:0;min-width:300px}.search-form-overlay{width:100%;height:100%;top:0}
</style>
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input onclick="document.getElementById('popup_searchBox').style.display = 'block';" id="search-text" name="q" placeholder="" type="text" />
</form>
</div>
<div id="popup_searchBox" style="display:none;">
<div id="popup_searchBox_Data">
<!-- Search Box -->
<div class="search-form-wrapper" style="display: block;">
<div class="search-form-overlay"></div>
<form action="/search" class="search-form" method="get">
<label class="search-form-label">Введите ключевое слово и нажмите Enter <button onclick="document.getElementById('popup_searchBox').style.display = 'none';">Закрыть</button></label>
<input class="search-text" name="q" type="text" value="" />
<button class="hide search-submit" style="display:none;" type="submit"><trans>Поиск</trans></button>
</form>
</div>
<!-- Search Box -->
</div>
</div>
Со стилями вы можете поэкспериментировать, исходя из вашего вкуса. В примере окно на черном фоне. Меняйте как вам нужно background:#000000;.цвет шрифта color:#FFFFFF; и размер font-size:60px;
Название гаджета по вашему желанию, как и текстовые поля в стильном окне поиска.
Всем удачи и до встречи.
