- Página Inicial
- Códigos CSS Prontos
- Como criar uma barra de pesquisa em HTML
- Voltar
Como criar uma barra de pesquisa em HTML

Neste tutorial ensinaremos como criar uma Barra de pesquisa em HTML.
Nesta seção, projetaremos uma estrutura simples na tag <form>.
temos dentro da tag <form> as tags <input>,<i>, e <button>. Essas tags usaremos para criar a nossa barra de busca com html e css.
Vamos Adicionar o HTML
<div class="box-busca"> <div class="search-box"> <form method="post" action="#"> <input type="text" class="search-box-input" name="busca" placeholder="Faça sua Pesquisa"> <button class="search-box-button"><i class="search-box-icone icon icon-search"></i></button> </form> </div><!-- Search --> </div><!--Box Busca-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para projetar a nossa Barra de busca
.
.box-busca{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #ffffff; } .search-box-input::placeholder { color:#ffffff; opacity: 0.6; } /* Chrome, Opera ySafari */ .search-box-input::-webkit-input-placeholder { color: #ffffff; } /* Firefox 19+ */ .search-box-input::-moz-placeholder { color: #ffffff; } /* IE 10+ y Edge */ .search-box-input:-ms-input-placeholder { color: #ffffff; } .search-box form { display: flex; border-radius: 50px; background-color: #4c4c4c; height: 45px; } .search-box:hover .search-box-input { padding-left: 2em; padding-right: 1em; width: 250px; } .search-box-input { outline: 0; font-size: 1.2em; color: #fff; width: 0; padding: 0; border: none; background: none; transition: .45s; } .search-box-button { display: flex; border-radius: 50%; width: 45px; height: 45px; background-color: #14c0c7; border: none; cursor: pointer; transition: .3s; } .search-box-button:active { transform: scale(.85); } .search-box-icone { margin: auto; color: #fff; } @media screen and (min-width: 400px){ .search-box:hover .search-box-input { width: 360px; } }
Combinando as Duas seções acima Html + Css temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
10.245 Visualizações
Deixe um comentário