Carregando...

Como criar uma barra de pesquisa em HTML

Postado: 28 de março de 2023

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

5.634 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados