[Tutorial] Barra de busca no estilo IPB

Informações:
Autor: Desconhecido
Funcionalidade: Todas as Versões

Painel de Controle ☛ Visualização ☛ Templates ☛ Geral ☛ Overall_Header

Código:

<div id="search" class="attach">
<form method="get" action="/search?search_where=11" id="search-box">
<fieldset>
<label for="main_search" class="hide"></label>
<a href="/search" title="Busca avançada" accesskey="4" rel="search" id="adv_search" class="attach"></a>
<span id="search_wrap">
<input type="text" name="search_keywords" id="main_search" maxlength="128" value="Search..." onclick="if (this.value == 'Buscar...') this.value = '';" onblur="if (this.value == '') this.value = 'Buscar...';">
<span class="choice ipbmenu clickable" id="search_options" style="">Forum</span>
<input type="submit" class="submit_input clickable" value=""></span>
</fieldset>
</form>
</div>

Painel de Controle ☛ Visualização ☛ Imagens eCores ☛ Cores ☛ Folha de Estilo CSS

Código:

.attach{float: right;}
.hide{display: none;}
#adv_search{width: 16px;
height: 16px;
background: url(http://community.invisionpower.com/filestore/public/style_images/master/advanced_search.png) no-repeat right 50%;
text-indent: -3000em;
display: inline-block;
margin: 4px 0 4px 4px;}
#search_wrap{position: relative;
background: white;
display: block;
padding: 0 26px 0 4px;
height: 26px;
line-height: 25px;
-moz-border-radius: 3px 4px 4px 3px;
border-radius: 3px 4px 4px 3px;
border-radius: 3px 4px 4px 3px;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
min-width: 230px;}
#main_search {margin-top: 5px;
font-size: 12px;
border: 0;
padding: 0;
background: transparent;
width: 130px;
outline: 0;}
#search_options {font-size: 10px;
height: 20px;
line-height: 20px;
margin: 3px 3px 3px 0;
padding: 0 6px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #EAEAEA;
display: inline-block;
float: right;
max-width: 80px;
text-overflow: ellipsis;
overflow: hidden;}
#search .submit_input {background: #7BA60D url(http://community.invisionpower.com/filestore/public/style_images/master/search_icon.png) no-repeat 50%;
text-indent: -3000em;
padding: 0;
border: 0;
border: 1px solid #7BA60D;
display: block;
width: 26px;
height: 26px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
-webkit-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);}