Como criar uma barra de pesquisa em HTML

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