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 27 solutions au

 

Moteur de recherche

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]

 

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]

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
  • 1 état multisupports
  • 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]

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]

Hazeem Nuski

Caractéristiques

  • Search box seule
  • CSS et jQuery
  • 1 état multisupports
  • 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]

Html Drive - Clic sur bouton

Caractéristiques

  • Search box seule
  • CSS pur
  • 1 état multisupports
  • 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
  • Fonctionnement parfait, il y a tout ce qu'il faut, c'est du beau travail
  • Beau site de ressources gratuites

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 / 04-12-2020]

Ichinose Takane

Caractéristiques

  • Search box seule
  • CSS, Normalize.min.css
  • 1 état multisupports
  • 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]

Jacklin Liam

Caractéristiques

  • Search box seule
  • CSS pur
  • 1 état multisupports
  • 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
  • C'est intelligent et bien fait

Image cliquable pour voir l'exemple

search box simple mais design en CSS pure

Références

Site web

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

Kantner Jon

Caractéristiques

  • Search box seule
  • CSS pur
  • 1 état multisupports
  • 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]

Ottaviani Fabio

Caractéristiques

  • Search box avec filtres de recherche cliquables
  • CSS, JS, jQuery
  • 1 état multisupports
  • 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
  • 1 état multisupports
  • 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
  • 1 état multisupports
  • 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
  • 1 état multisupports
  • 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
  • 1 état multisupports
  • 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]

Small Tommy

Caractéristiques

  • Search box seule
  • CSS, JS et jQuery
  • 1 état multisupports
  • 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
  • 1 état multisupports
  • Pas de contrôle de présence de contenu du champ de recherche
  • Pour annuler la recherche il faut supprimer les caractères saisis

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
  • 1 état multisupports
  • 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
  • 1 état multisupports
  • 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
  • 1 état multisupports
  • 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]