#navbar, #navbar-iframe { height: 0px; visibility: hidden; display: none; } Index Design - Inovando o conceito sobre design !!: Caixa de Busca Com HTML5


Eae Galera Aqui é o Luccas e hoje vim postar um tutorial de HTML5 , o tutorial é Caixa de Busca Com HTML5 .
Entao sem enrolar mais vamos ao tutorial



1ºAcesse o seu modelo, vá em Editar HTML e Procure por:

</b:skin>
2º E acima cole o código Abaixo:
#busca-html5 {
font-size: 13px;
width: 80%;
border: 1px solid #BFBFBF !important;
margin: 0 0 0 0;
padding: 5px 5px;
height: 20px;
font: normal 100% Arial,Helvetica,sans-serif;
color: #2f2f2f;
background: #FAFAFA;
float: left;
border: none;
display: inline;
outline: none;
}
input#buscar-busca-html5 {
display: inline;
margin: 0 0 0 0;
height: 32px;
width: 35px;
border: 1px solid #4189C1 !important;
color: white;
border: none;
cursor: pointer;
margin-left: 8px !important;
background: #58A9E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Irvt7VcsCNVZ0-Ws_H_1ryEvsrOIia3zRZ0OK0JkYQvQb-CSx5A96CM8YSME2oFQjNOnPg8i_7wJdFWfZTq7JV2c4jLqTLlghk-zWmzDmq3adnCQJ2lHQr8PAhVdwDfAS-167wyvtzE/h80/buscar.png) 3px 2px no-repeat;
text-indent: -9999px;
}
input#buscar-busca-html5:active {
background: #71b8ef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Irvt7VcsCNVZ0-Ws_H_1ryEvsrOIia3zRZ0OK0JkYQvQb-CSx5A96CM8YSME2oFQjNOnPg8i_7wJdFWfZTq7JV2c4jLqTLlghk-zWmzDmq3adnCQJ2lHQr8PAhVdwDfAS-167wyvtzE/h80/buscar.png) 3px 2px no-repeat;
}

3º Salve... Agora crie uma pagina Html/JavaScript e cole o código abaixo:
<div id="search"><form action="/search" id="form-busca" method="get"><input id="busca-html5" name="q" type="text" value="" x-webkit-speech="true" /><input id="buscar-busca-html5" type="submit" value="BUSCAR" /></form></div>


Fonte: Ulquiorra

Curta-Nos