Template responsive gratuit de search box ou search bar (champ de recherche) design

Présentation

La recherche fait partie intégrante de la plupart des applications ou sites à fort contenu. Pour que l'utilisateur trouve rapidement ce qu'il cherche il faut que la boîte de recherche soit simple et attrayante.

Première catégorie le moteur de recherche, deuxième catégorie la search box intégrée à la barre de navigation, troisième catégorie, la search box seule.

En mode mobile vous avez accès à chaque catégorie par un insert au milieu droit de l'écran

Je vous propose 45 solutions au



Sur d'autres pages

[Menu CSS] [Menu JS] [Icône ham.]

 

Moteur de recherche

Cong Tung Phan

- Recherche dans Wikipédia

Caractéristiques

  • Search box avec résultats de recherche
  • CSS, jQuery, Bootstrap
  • Aucun contrôle
  • Si vous ne mettez rien dans la zone de recherche l'outil lance une recherche au hasard
  • Allemagne

Image cliquable pour voir l'exemple

search box avec liste de resultats

Références

Site web

[Créé / modifié] [06-01-2022 / 06-01-2022]

Gonzalez Bianca - Wikipedia

- Recherche dans Wikipédia

Caractéristiques

  • Search box avec des résultats de recherche issus de Wikipédia
  • CSS, JS, jQuery
  • Aucun contrôle
  • Il existe la possibilité de lancer une recherche au hasard
  • Manille, Philippines

Image cliquable pour voir l'exemple

search box avec liste de resultats issus de Wikipedia

Références

Site web

[Créé / modifié] [27-01-2022 / 27-01-2022]

Google

- À essayer urgemment !

Caractéristiques

  • Service gratuit offert par Google
  • L'exemple ci-dessus recherche sur tout le site Web Soluces
  • Service géant mais il faut supporter les annonces qui précèdent les résultats

Image cliquable pour voir l'exemple

moteur de recherche gratuit offert par Google

Références

Site web

[Créé / modifié] [03-02-2021 / 03-02-2021]

Html5 And Blog

- Recherche directe, exemple basique !

Caractéristiques

  • Search box avec résultats de recherche
  • CSS, JS, jQuery
  • La recherche ne se lance pas si le champ est vide
  • L'ensemble des mots s'affichent en dessous
  • La liste diminue en fonction des lettres tapées dans le champ de recherche

Image cliquable pour voir l'exemple

recherche basique avec resultats

Références

Site web

[Créé / modifié] [27-01-2022 / 27-01-2022]

Robooneus

- Recherche directe, exemple basique !

Caractéristiques

  • Search box avec résultats de recherche
  • CSS, JS, jQuery, jQuery UI
  • La recherche ne se lance pas si le champ est vide
  • L'ensemble des mots s'affichent en dessous
  • La liste diminue en fonction des lettres tapées dans le champ de recherche avec un joli glissement gauche
  • Berlin, Allemagne

Image cliquable pour voir l'exemple

recherche basique avec resultats

Références

Site web

[Créé / modifié] [27-01-2022 / 27-01-2022]

 

Template responsive de navbar (barre de navigation avec search box (champ de recherche) design

Azmind

Caractéristiques

  • Search box intégrée à la barre de navigation
  • Trois solutions approchantes
  • CSS, JS, jQuery, Bootstrap 3.3
  • 2 états : Desktop, tablette; Mobile
  • Aucun contrôle

Image cliquable pour voir l'exemple

search box responsive,  integree dans une navbar

Références

Site web

[Créé / modifié] [21-01-2021 / 21-01-2021]

Belagoun Chouaib

Caractéristiques

  • Champ de recherche avec recouvrement total circulaire à partir du centre
  • CSS, Normalize.css, JS, jQuery
  • Rollover sur la croix de fermeture de la recherche
  • Pas de possibilité de lancer la recherche ni de retour à l'état initial avec la touche entrée
  • Djelfa , Algérie

Image cliquable pour voir l'exemple

Champ de recherche avec recouvrement total circulaire

Références

Site web

[Créé / modifié] [18-01-2022 / 18-01-2022]

Cena Piero

- Présentation agréable !

Caractéristiques

  • Search box intégrée
  • CSS, Normalize.css, JS, jQuery, Bootstrap 3.3
  • 2 états : Desktop, tablette; Mobile
  • Aucun contrôle

Image cliquable pour voir l'exemple

search box dans une navbar

Références

Site web

Site de l'auteur

[Créé / modifié] [08-01-2021 / 08-01-2021]

Choudhary Girraj

- Présentation soignée

Caractéristiques

  • Search box intégrée avec Logo
  • CSS, JS, jQuery, Popper.js, Bootstrap 4.3
  • 2 états : Desktop; Tablette; mobile
  • Aucun contrôle

Image cliquable pour voir l'exemple

search box dans une navbar avec logo integre

Références

Site web

[Créé / modifié] [22-02-2021 / 22-02-2021]

CodeLab - Tutorial Republic

Caractéristiques

  • Search box intégrée à une barre de navigation
  • CSS, JS; jQuery, Bootstrap
  • 2 états : Desktop, tablette; Mobile
  • Pas de contrôle de présence de contenu du champ de recherche
  • Aucune possibilité d'annuler la recherche

Image cliquable pour voir l'exemple

barre de navigation responsive avec search bar basée sur le logiciel Bootstrap

Références

Site web

[Créé / modifié] [24-09-2020 / 24-09-2020]

Coding Nepal

- Super ! Superbe tuto !

Caractéristiques

  • Search box intégrée à une barre de navigation
  • CSS, JS
  • 2 états : Desktop, tablette; Mobile
  • Contrôle de présence de contenu du champ de recherche
  • Possibilité d'annuler la recherche

Image cliquable pour voir l'exemple

barre de navigation responsive avec search box et tutoriel

Références

Site web

[Créé / modifié] [24-09-2020 / 24-09-2020]

GetBootstrap

- Bootstrap 5.0.0 bêta 2, l'original

Caractéristiques

  • Search box intégrée
  • FrameWork Bootstrap 5
  • 2 états : Desktop; Tablette; mobile
  • Footer "auto collant"

Image cliquable pour voir l'exemple

navbar avec serach bax par GetBootstrapCom

Références

Site web

[Créé / modifié] [22-02-2021 / 22-02-2021]

Khadka Mohan

Caractéristiques

  • Search box intégrée à un template pour mobile
  • CSS, Animate.css, JS, jQuery
  • Contrôle de présence de contenu du champ de recherche mais pas de message d'absence
  • Lancement de la recherche et affichage des résultats
  • Héabite à Kathmandu, Nepal et est développeur full-stack

Image cliquable pour voir l'exemple

search box integree a un template pour mobile

Références

Site web

[Créé / modifié] [21-12-2020 / 21-12-2020]

Kingdom Creation

Caractéristiques

  • Search box intégrée à une barre de navigation
  • CSS pur
  • 2 états : Desktop, tablette; Mobile
  • Pas de contrôle de présence de contenu du champ de recherche
  • Possibilité d'annuler la recherche
  • Le menu et le champ de recherche sont gérés par deux boutons différents

Image cliquable pour voir l'exemple

barre de navigation responsive avec search box et tutoriel

Références

Site web

[Créé / modifié] [24-09-2020 / 24-09-2020]

Lett Jacob

Caractéristiques

  • Barre de navigation avec un formulaire de recherche qui s'ouvre dans une fenêtre modale, en plein écran
  • CSS, jQuery, Bootstrap 3.3
  • Pas de contrôle de présence de contenu du champ de recherche
  • Aucune possibilité d'annuler la recherche

Image cliquable pour voir l'exemple

barre de navigation responsive avec search box en modal window

Références

Site web

Site de l'auteur

[Créé / modifié] [15-11-2021 / 15-11-2021]

Prep Bootstrap

Caractéristiques

  • Search box intégrée à une barre de navigation
  • CSS, JS; jQuery, Bootstrap
  • 2 états : Desktop, tablette; Mobile
  • Pas de contrôle de présence de contenu du champ de recherche
  • Aucune possibilité d'annuler la recherche
  • Simple mais suffisant !

Image cliquable pour voir l'exemple

barre de navigation responsive et design avec search box

Références

Site web

[Créé / modifié] [24-09-2020 / 24-09-2020]

 

Template responsive de simple search box (champ de recherche) originale et design

Albaugh Jake

- Search box avec liste de résultats en fonction des caractères saisis
- Il est possible de se créer sa propre liste de mots

Caractéristiques

  • CSS, Normalize.css et JS
  • Un résultat avec les 'mots trouvés' sur une recherche exacte
  • Un résultat avec les 'mots trouvés' sur une recherche dans le désordre
  • Extra !
  • Site de l'auteur à visiter

Image cliquable pour voir l'exemple

champ de recherche avec proposition de liste de mots suite a la saisie de caracteres

Références

Site web

Site de l'auteur

[Créé / modifié] [21-03-2021 / 21-03-2021]

Dulieu Thierry

Caractéristiques

  • CSS, jQuery
  • Aucun contrôle
  • La zone de saisie glisse par le haut après un clic sur la loupe
  • Présence d'une croix pour annuler la saisie et d'un bouton pour lancer la recherche
  • Paris, France

Image cliquable pour voir l'exemple

search box zone glissante

Références

Site web

[Créé / modifié] [06-01-2022 / 06-01-2022]

Frost Brad - Nouvelle Zélande

Caractéristiques

  • Search box seule
  • CSS pur
  • Aucun contrôle
  • La croix réinitialise la zone de saisie
  • Type=search pour les appareils tactiles
  • Pittsburgh, Pennsylvanie, USA

Image cliquable pour voir l'exemple

search box responsive

Références

Site web

[Créé / modifié] [15-11-2021 / 15-11-2021]

Hatzipanis Alex

Caractéristiques

  • Search box seule
  • CSS, JS, jQuery
  • Aucun contrôle
  • La loupe lance la recherche, la croix réinitialise la zone de saisie
  • Bonne cinématique !
  • Nouvelle Zélande

Image cliquable pour voir l'exemple

search box simple

Références

Site web

[Créé / modifié] [11-10-2021 / 11-10-2021]

Hazeem Nuski

Caractéristiques

  • Search box seule
  • CSS et jQuery
  • Contrôle de présence du contenu de recherche
  • On annule facilement la recherche en cliquant sur la croix. Extra !
  • Fonctionnement parfait

Image cliquable pour voir l'exemple

search box design avec CSS3 et jQuery et controle de presence du champ de recherche

Références

Site web

[Créé / modifié] [19-10-2020 / 19-10-2020]

I Can Be Creative - Clic sur bouton

- Service à l'abandon, dommage !
- Vous pouvez le récupérer ici, sur le popup, en faisant "clic droit" puis "afficher le code source de la page"

Caractéristiques

  • Search box seule
  • CSS, JS, jQuery
  • Contrôle de présence du contenu de recherche
  • On annule facilement la recherche en cliquant sur la croix. Extra !
  • Belles animations de sortie de la croix et d'apparition du texte d'engagement à taper un texte de recherche
  • Il y a tout ce qu'il faut, c'est du beau travail

Image cliquable pour voir l'exemple

champ de recherche en CSS pur avec controles et animations

Références

Site web

[Créé / modifié] [04-12-2020 / 08-04-2021]

Ichinose Takane

Caractéristiques

  • Search box seule
  • CSS, Normalize.min.css
  • On annule facilement la recherche en cliquant sur la croix.
  • Belle animation. C'est la raison de sa présence ici
  • Manque le bouton de lancement de la recherche, la proposition est donc inutilisable telle quelle

Image cliquable pour voir l'exemple

search box design en pure CSS avec une belle animation

Références

Site web

[Créé / modifié] [01-11-2020 / 01-11-2020]

Iker Aaron

Caractéristiques

  • CSS, JS, jQuery
  • Saisie de la recherche puis 'envoi' avec la touche 'return'
  • Mise en évidence de la saisie et affichage des réponses

Image cliquable pour voir l'exemple

search box avec affichage des resultats

Références

Site web

[Créé / modifié] [26-10-2021 / 26-10-2021]

Joskic Boris

Caractéristiques

  • Search box seule
  • CSS pur
  • Aucun contrôle
  • Attention de bien cliquer sur la loupe
  • Loupe et croix même fonction : fermer la box

Image cliquable pour voir l'exemple

search box simple

Références

Site web

[Créé / modifié] [11-10-2021 / 11-10-2021]

Kantner Jon

Caractéristiques

  • Search box seule
  • CSS pur
  • Contrôle de présence d'un caractère dans la zone de recherche
  • La box ne s'active, avec transition, que lorsque vous saisissez un caractère
  • La recherche est lancée si nous sommes dans le cas précédent. Top !
  • On peut supprimer la saisie avec la croix. top !
  • Je n'aime pas trop le changement de style entre la loupe et la search box

Image cliquable pour voir l'exemple

search box complete avec activation si presence de caractere

Références

Site web

[Créé / modifié] [19-11-2020 / 19-11-2020]

Kennedy Brandon

- Avec ou sans bouton 'reset'

Caractéristiques

  • Search boxes concepts
  • CSS, JS, jQuery
  • Tous les exemples n'utilisent pas jQuery
  • High Point, NC, USA

Image cliquable pour voir l'exemple

search box concept avec css et javascript

Références

Site web

[Créé / modifié] [03-11-2021 / 03-11-2021]

Khun Adam - St Petersburg, Floride

Caractéristiques

  • Search box seule
  • CSS, Normalize.css, JS, jQuery
  • Le résultat de la recherche est affiché en liste sur une fenêtre modale. Top !

Image cliquable pour voir l'exemple

search box complete avec activation si presence de caractere

Références

Site web

[Créé / modifié] [04-08-2021 / 04-08-2021]

Litherland Matt

Caractéristiques

  • SCSS, Normalize.css
  • L'entourage coloré disparait au clic
  • Parfaitement reponsive

Image cliquable pour voir l'exemple

search box seule css pure

Références

Site web

[Créé / modifié] [26-10-2021 / 26-10-2021]

Montani Ines

Caractéristiques

  • Champ de recherche avec animation pendant la recherche
  • CSS, JS
  • Pas responsive, du fait d'une largeur fixe à 500px. Dommage ! (largeur à 300px dans l'exemple ci-dessous)
  • Berlin, Allemagne

Image cliquable pour voir l'exemple

search box avec animation pendant la recherche

Références

Site web

[Créé / modifié] [18-01-2022 / 18-01-2022]

Nguyen Lisa

Caractéristiques

  • La base des bases
  • CSS pur
  • Il suffit de cliquer à côté du champ de recherche pour revenir à l'état initial
  • Portland, Orégon, USA

Image cliquable pour voir l'exemple

responsive search box

Références

Site web

[Créé / modifié] [09-11-2021 / 09-11-2021]

Ottaviani Fabio

Caractéristiques

  • Search box avec filtres de recherche cliquables
  • CSS, JS, jQuery
  • Les icônes changent de couleur au clic
  • Ottaviani fabio habite Pesaro/Perugia en Italie et est développeur front-end

Image cliquable pour voir l'exemple

search box avec filtres de recherche avec animation et croix de fermeture

Références

Site web

[Créé / modifié] [21-12-2020 / 21-12-2020]

Page d'Art

Caractéristiques

  • Search box seule
  • CSS, JS
  • La recherche est active et lancée sur Google
  • Tuto très complet (voir Site web ci-dessous)

Image cliquable pour voir l'exemple

search box en pur CSS avec animation et croix de fermeture

Références

Site web

[Créé / modifié] [15-11-2020 / 15-11-2020]

Pasko Denis

Caractéristiques

  • Search box seule
  • CSS, JS, TweenMax.min.js
  • On annule facilement la recherche en cliquant sur la croix.
  • Belle animation. C'est la raison de sa présence ici
  • Manque le bouton de lancement de la recherche, la proposition est donc inutilisable telle quelle

Image cliquable pour voir l'exemple

search box en pur CSS avec animation et croix de fermeture

Références

Site web

[Créé / modifié] [01-11-2020 / 01-11-2020]

Raring Milan

Caractéristiques

  • Search box seule
  • CSS pur
  • Pas de contrôle ni de lancement
  • très jolie transition

Image cliquable pour voir l'exemple

search box tres design en CSS pur, sans aucun Javascript

Références

Site web

[Créé / modifié] [19-11-2020 / 19-11-2020]

Raza Salman

Caractéristiques

  • Search box seule
  • CSS pur
  • Pas de contrôle de présence de contenu du champ de recherche
  • Possibilité d'annuler la recherche

Image cliquable pour voir l'exemple

search box design en CSS pure

Références

Site web

[Créé / modifié] [15-11-2020 / 15-11-2020]

Rugile Jack

Caractéristiques

  • Champ de recherche avec impulsion incandescente
  • CSS, Normalize.css, JS, jQuery
  • Au moment ou l'on se positionne dans le champ de rechercche celui-ci se met à briller comme un coeur qui bat
  • Une fois la recherche lancée, la zone s'éteind
  • Palm Bay, Floride, USA

Image cliquable pour voir l'exemple

Champ de recherche avec impulsion incandescente

Références

Site web

[Créé / modifié] [18-01-2022 / 18-01-2022]

Saling Matt

- Solution mobile

Caractéristiques

  • CSS, JS, jQuery, jQuery-ui
  • Le champ de recherche descend du haut en glissant après avoir cliqué sur le bouton
  • Après saisie d'un caractère apparait le bouton RAZ
  • Phoenix Arizona, USA

Image cliquable pour voir l'exemple

search box sliding

Références

Site web

[Créé / modifié] [09-11-2021 / 09-11-2021]

Small Tommy

Caractéristiques

  • Search box seule
  • CSS, JS et jQuery
  • On ne peut pas lancer la recherche quand le champ de recherche est vide. Cool !
  • Pour annuler la recherche il faut supprimer les caractères saisis
  • Animation quand on positionne le curseur et quand on lance la recherche

Image cliquable pour voir l'exemple

search box design en JS et jQuery

Références

Site web

[Créé / modifié] [15-10-2020 / 15-10-2020]

Smart Michael

- Zone de recherche avec effet de frappe

Caractéristiques

  • Search box seule
  • CSS, JS et jQuery
  • Gadget très original

Image cliquable pour voir l'exemple

champ de recherche avec effet frappe dans cette zone

Références

Site web

[Créé / modifié] [21-03-2021 / 21-03-2021]

Sutton Liam

Caractéristiques

  • Search box seule
  • CSS pur
  • Pas de contrôle de présence de contenu du champ de recherche
  • La box ne s'active, avec transition, que lorsque vous saisissez un caractère
  • C'est intelligent et bien fait

Image cliquable pour voir l'exemple

search box en pur CSS

Références

Site web

[Créé / modifié] [24-09-2020 / 24-09-2020]

Tkachev Alex

Caractéristiques

  • Search box seule
  • CSS, JS et jQuery
  • Pas de contrôle de présence de contenu du champ de recherche
  • On annule facilement la recherche en cliquant sur la croix. Extra !
  • Fonctionnement parfait

Image cliquable pour voir l'exemple

search box design en JS et jQuery

Références

Site web

[Créé / modifié] [15-10-2020 / 15-10-2020]

TympanusNet - Clic sur bouton

Caractéristiques

  • Search box seule
  • CSS, JS et Modernizr.js
  • Pas de contrôle de présence de contenu du champ de recherche
  • La croix d'annulation de la saisie apparait après la prise en compte du premier caractère
  • Beau tutoriel
  • Cette solution date de 2013, impressionnant !

Image cliquable pour voir l'exemple

search box avec transition et croix de fin de saisie

Références

Site web

[Créé / modifié] [04-12-2020 / 04-12-2020]

Web Designer Wall

Caractéristiques

  • Search box extensible
  • CSS pur
  • Le bouton de recherche s'étire gentiment au clic
  • Nick La est designer / illustrateur

Image cliquable pour voir l'exemple

search box simple en CSS pur

Références

Site web

[Créé / modifié] [21-12-2020 / 21-12-2020]

Wulf Sarah - Avec propositions

Caractéristiques

  • CSS, JS, jQuery
  • Il s'agit d'une recherche prédictive. Elle suggère des termes de recherche possibles à partir d'un tableau qui pourrait théoriquement venir d'une source extérieure, mais c'est à développer.
  • Philadelphia, USA

Image cliquable pour voir l'exemple

search box avec predictions

Références

Site web

[Créé / modifié] [03-11-2021 / 03-11-2021]