Campo de Busca Interativo em CSS

Estilo CSS

Agora, vamos estilizar o componente usando CSS para que inicialmente o campo de busca esteja oculto e só apareça quando o usuário clicar no ícone de busca.

cssCopy code
.container {
    position: relative;
}

.search-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}

.search-box input {
    width: 200px; /* ajuste conforme necessário */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

.search-icon {
    cursor: pointer;
}

.search-icon i {
    font-size: 20px;
}

No CSS acima, definimos a classe .container como position: relative para que possamos posicionar o campo de busca absolutamente em relação a ela. Em seguida, ocultamos o campo de busca usando display: none e o posicionamos logo abaixo do ícone de busca usando position: absolute com top: 100% e left: 0.

Também estilizamos o campo de entrada para torná-lo visualmente agradável, com bordas arredondadas e uma largura fixa. O ícone de busca recebe um estilo básico para torná-lo clicável.

Adicionando Comportamento com JavaScript (Opcional)

Se desejar adicionar um comportamento interativo ao componente, como mostrar e ocultar o campo de busca ao clicar no ícone de busca, você pode usar JavaScript. Aqui está um exemplo simples usando JavaScript puro:

javascriptCopy code
document.addEventListener("DOMContentLoaded", function() {
    const searchIcon = document.querySelector(".search-icon");
    const searchBox = document.querySelector(".search-box");

    searchIcon.addEventListener("click", function() {
        searchBox.style.display = searchBox.style.display === "block" ? "none" : "block";
    });
});

Este script adiciona um ouvinte de eventos ao ícone de busca. Quando o ícone é clicado, ele verifica o estado atual do campo de busca. Se estiver visível, ele o oculta. Se estiver oculto, ele o torna visível.

Considerações Finais

Este é apenas um exemplo básico de como criar um campo de busca que aparece ao clicar em um ícone de busca usando HTML, CSS e JavaScript. Você pode personalizar e estilizar o componente conforme necessário para se adequar ao design do seu site ou aplicativo. Além disso, existem muitas outras maneiras de implementar essa funcionalidade, dependendo dos requisitos específicos do seu projeto.