Champ de recherche interactif CSS

Pour créer un champ de recherche qui s’affiche lors du clic sur une icône de recherche en CSS, vous pouvez utiliser une combinaison de HTML, CSS et JavaScript. Voici une explication détaillée de la procédure :

HTML :

Commencez par définir la structure de base de votre champ de recherche dans votre fichier HTML. Vous aurez besoin d’un élément conteneur pour l’icône de recherche et le champ de recherche lui-même. Par exemple :

htmlCopy code
<div class="search-container">
    <div class="search-icon">
        <i class="fas fa-search">i>
    div>
    <input type="text" class="search-input" placeholder="Rechercher...">
div>

CSS :

Ensuite, utilisez CSS pour styliser votre champ de recherche et l’icône associée. Vous pouvez cibler les éléments individuels en utilisant les classes que vous avez définies dans le HTML. Voici un exemple de style CSS :

cssCopy code
.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

.search-input {
    width: 0;
    padding: 10px;
    border: none;
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}

.search-input:focus {
    width: 200px; /* ajustez la largeur selon vos besoins */
}

JavaScript :

Enfin, utilisez JavaScript pour ajouter un événement de clic à l’icône de recherche, afin de déclencher l’affichage du champ de recherche lorsqu’elle est cliquée. Vous pouvez également ajouter du code pour gérer la logique de fermeture du champ de recherche lorsque l’utilisateur clique en dehors de celui-ci. Voici un exemple de code JavaScript :

javascriptCopy code
document.addEventListener('DOMContentLoaded', function() {
    const searchIcon = document.querySelector('.search-icon');
    const searchInput = document.querySelector('.search-input');

    searchIcon.addEventListener('click', function() {
        searchInput.focus();
    });

    document.addEventListener('click', function(event) {
        const isClickInside = searchIcon.contains(event.target) || searchInput.contains(event.target);
        if (!isClickInside) {
            searchInput.blur();
            searchInput.style.width = '0';
        }
    });
});

Ce code JavaScript ajoute un écouteur d’événements au chargement du document, puis détecte les clics sur l’icône de recherche et à l’extérieur du champ de recherche. Lorsque l’icône de recherche est cliquée, le champ de recherche obtient le focus et s’ouvre en élargissant sa largeur. Lorsqu’un clic se produit en dehors du champ de recherche, le champ perd le focus et réduit sa largeur.

En combinant ces éléments HTML, CSS et JavaScript, vous pouvez créer un champ de recherche qui s’affiche lors du clic sur une icône de recherche en utilisant CSS. Vous pouvez ajuster le style et le comportement selon vos besoins spécifiques.

Bien sûr, plongeons plus en détail dans chaque partie de la solution pour créer un champ de recherche qui s’affiche lors du clic sur une icône de recherche en utilisant CSS, HTML et JavaScript.

HTML :

Dans le code HTML fourni précédemment, nous avons utilisé une structure simple comprenant deux éléments principaux :

• Un conteneur .search-container pour l’ensemble du champ de recherche.
• Un élément .search-icon contenant l’icône de recherche.

À l’intérieur du conteneur, nous avons également un élément avec la classe .search-input pour le champ de recherche lui-même. Cet élément est initialisé avec une largeur de 0 et une transition CSS pour créer l’effet d’ouverture et de fermeture lorsqu’il est cliqué.

CSS :

Le CSS fourni est utilisé pour styliser les éléments HTML et créer l’aspect visuel du champ de recherche. Voici une explication plus détaillée des styles utilisés :

• .search-container : Positionné relativement pour servir de conteneur global. Cela permet de positionner l’icône de recherche de manière absolue par rapport à ce conteneur.
• .search-icon : Positionné absolument pour être placé à droite du conteneur de recherche. La propriété top: 50% et transform: translateY(-50%) sont utilisées pour le centrer verticalement. Un curseur de pointeur est ajouté pour indiquer qu’il est cliquable.
• .search-input : Initialement, il a une largeur de 0 pour le cacher. Lorsqu’il obtient le focus, sa largeur est étendue pour afficher le champ de recherche. La transition CSS est utilisée pour une animation fluide lors de l’ouverture et de la fermeture du champ de recherche.

JavaScript :

Le code JavaScript fourni ajoute le comportement dynamique au champ de recherche. Voici un aperçu des fonctionnalités qu’il implémente :

• L’événement 'DOMContentLoaded' assure que le code JavaScript est exécuté une fois que le DOM est prêt.
• Lorsque l’icône de recherche est cliquée, le champ de recherche obtient le focus à l’aide de searchInput.focus(), ce qui entraîne son ouverture.
• Un écouteur d’événements est également ajouté au document pour détecter les clics à l’extérieur du champ de recherche. Lorsque cela se produit, le champ de recherche perd le focus et réduit sa largeur à zéro, le cachant à nouveau.

Conclusion :

En combinant HTML, CSS et JavaScript, cette approche crée une expérience utilisateur fluide pour un champ de recherche qui s’ouvre et se ferme en réponse à l’interaction de l’utilisateur avec une icône de recherche. Vous pouvez personnaliser davantage le style et le comportement en fonction de vos besoins spécifiques en ajustant les classes CSS et en modifiant le code JavaScript.