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 65 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]

Eyre Trevor (2)

Caractéristiques

  • CSS, Normalize.css, JS, Autocomplete (CSS+JS)
  • Search box avec Autocomplete et l'option 'group'
  • Pour ne pas avoir l'option 'group' il suffit de remplacer:
    << then(data => { const results = data.query.search.map((result, index) => { return { ...result, index }; }); resolve(results); }); >>
    par
    << then(data => { resolve(data.query.search); }); >>
  • Saisir au moins 3 caractères
  • Un clic sur un résultat trouvé débranche sur le contenu Wikipédia correspondant
  • Boise, Idaho, USA

Image cliquable pour voir l'exemple

search box avec resultats groupes

Références

Site web

[Créé / modifié] [06-05-2022 / 06-05-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-dessous 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]

Isaiah Ayooluwa

Caractéristiques

  • CSS, Skeleton.css, JS, jQuery
  • Pas de proposition de saisie mais des résultats très bien présentés
  • La recherche s'effectue sur Wikipédia
  • Lagos, Nigéria

Image cliquable pour voir l'exemple

recherche effectuee sur wikipedia

Références

Site web

Site de l'auteur

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

Web Soluces

- Search box avec recherche dans Google
- J'ai essayé de faire une synthèse utile en laissant de côté les animations
- Je suis parti d'une base de construction trouvée sur: W3Docs.com
- Pour la recherche sur Google je me réfère à: Page d'Art

Caractéristiques

  • CSS, JS, Rien d'autre
  • Contrôle de présence de contenu du champ de recherche
  • Contrôle de 4 à 15 caractères alphabétiques obligatoires
  • Liste de propositions avec la balise 'datalist'
  • Indicateur, à droite du champ de saisie, indiquant que la validité de la saisie est atteinte
  • La recherche est lancée dans le moteur Google

Image cliquable pour voir l'exemple

search box avec lancement de la recherche dans Google

[Créé / modifié] [16-04-2022 / 16-04-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]

Angelevski Jove

Caractéristiques

  • CSS pur
  • Pas de rollover
  • Pas de lancement de la recherche mais on peut annuler la saisie avec la croix
  • Joli flouté
  • Royaume Uni

Image cliquable pour voir l'exemple

jolie search box en CSS pur

Références

Site web

[Créé / modifié] [08-02-2022 / 08-02-2022]

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]

Fadzrin Madu Muhammad

Caractéristiques

  • CSS, JS
  • Search box intégrée à une barre de menu
  • Le menu possède plusieurs niveaux
  • La boîte apparaît de façon glissante vers le haut et avec fondu
  • Kendari, Sulawesi, Indonésie

Image cliquable pour voir l'exemple

navbar avec search bar et transitions

Références

Site web

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

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
  • Kathmandu, Nepal

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]

Code.district

Caractéristiques

  • CSS pur
  • Au clic la zone de recherche s'illumine
  • Au premier caractère saisi, la croix d'annulation apparaît
  • Rollover sur la loupe
  • Royaume-Uni

Image cliquable pour voir l'exemple

search box lumineuse

Références

Site web

[Créé / modifié] [10-03-2022 / 10-03-2022]

Dechalert Aphinya

- Avec tutoriel
- Dechalert Aphinya alias Dotted Squirrel

Caractéristiques

  • CSS, JS, rien d'autre
  • Aucun contrôle, pas d'envoi
  • Pas de rollover
  • Au clic le champ de saisie se présente par extension
  • Présence d'une croix pour annuler la saisie et d'un bouton pour lancer la recherche
  • Auckland, Nouvelle Zélande

Image cliquable pour voir l'exemple

search box avec tutoriel

Références

Site web

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

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]

Eyre Trevor - Avec filtre

Caractéristiques

  • Search box avec filtre
  • CSS, Normalize.css, JS, Fuse.js
  • Aucun contrôle
  • Les mots trouvés dans le dictionnaire sont affichés sous le champ de recherche
  • Le mot recherché est récupéré et affiché après le clic sur la loupe
  • Boise, Idaho, USA

Image cliquable pour voir l'exemple

search box avec filtres

Références

Site web

Site de l'auteur

[Créé / modifié] [14-04-2022 / 14-04-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.
  • 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]

Html5 And Blog

- Avec visionnage du filtre qui sélectionne les mots possibles 'commençant' par ou 'contenant'

Caractéristiques

  • Search box avec filtre
  • 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]

Hyperplexed

- La recherche ne fonctionne pas véritablement: Les résultats sont imposés

Caractéristiques

  • Search box avec résultats en image
  • CSS, JS, React.js, Classnames.js, Axios.js
  • Au clic sur le bouton 'reset' le champ de recherche se positionne en milieu de page et affiche une image en arrière plan. La zone de saisie est translucide.
  • La recherche effectuée les images 'timbres' sont affichées. Elles pointent sur l'image 'grandeur nature'.
  • Les liens vers les images sont stockés dans un fichier JS
  • Très beau travail
  • USA

Image cliquable pour voir l'exemple

champ de recherche pour imaages

Références

Site web

[Créé / modifié] [17-08-2022 / 17-08-2022]

I Can Be Creative - Clic sur bouton

- Le site est reparti vers de nouveaux horizons mais le service reste présenté

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 même si 'return' fonctionne

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 résultat : 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.
  • 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]

Kantner Jon (2)

Caractéristiques

  • CSS pur
  • Au clic sur la loupe le rond de celle-ci se transforme en champ de saisie et le manche en curseur
  • Pas de rollover
  • Le premier caractère enregistré fait apparaître la croix d'annulation de la saisie
  • Pennsylvanie, USA

Image cliquable pour voir l'exemple

search box avec transformation de la loupe en champ de saisie

Références

Site web

Site de l'auteur

[Créé / modifié] [10-03-2022 / 10-03-2022]

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]

Kitten Capn

Caractéristiques

  • CSS, JS, jQuery
  • Au clic sur la loupe un popup descend par le haut
  • Pas de bouton d'annulation de la saisie mais pour en sortir il suffit de cliquer hors du champ de recherche

Image cliquable pour voir l'exemple

search box avec popup

Références

Site web

[Créé / modifié] [10-03-2022 / 10-03-2022]

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]

Meyer Philippe

- Select pour le search avec Tuto

Caractéristiques

  • CSS, JS
  • Avec, dans le détail, deux composants : vanillaSelectBox.css et vanillaSelectBox.js
  • Sélection simple/multiple
  • Jolie présentation du champ 'select' et de ce que l'on peut faire avec
  • Paris, France

Image cliquable pour voir l'exemple

select box

Références

Site web

Tuto vu sur CSSScript

[Créé / modifié] [21-02-2022 / 21-02-2022]

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]

Idowu.O Arifayan

Caractéristiques

  • CSS, JS, rien d'autre
  • Le bouton pulse cinq fois à l'affichage
  • Pas de rollover
  • Au clic le champ de recherche apparaît par extension et un texte s'affiche style machine à écrire vous incitant à saisir votre recherche
  • Au premier caractère saisi un avertissement, vous disant qu'il faut faire 'enter' pour lancer la recherche, se glisse sous le champ de saisie
  • On ne peut pas refermer l'ensemble
  • Lagos, Nigéria

Image cliquable pour voir l'exemple

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

Références

Site web

Site de l'auteur

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

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 même si 'return' fonctionne

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]

Pitt Martin

- Étude de style

Caractéristiques

  • Search box seule
  • CSS pur
  • Pas de contrôle ni de lancement
  • Trois boules bleues lévitent quelques secondes avant d'exploser pour former le bord bleu de la zone de recherche
  • Original
  • Londres

Image cliquable pour voir l'exemple

search box, etude de style

Références

Site web

[Créé / modifié] [17-08-2022 / 17-08-2022]

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]

Robooneus

- Avec visionnage du filtre

Caractéristiques

  • Search box avec filtre
  • 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]

Root Dan

Caractéristiques

  • CSS, Normalize.css, JS, jQuery
  • Rollover sur la loupe
  • Au clic le champ de recherche apparaît par extension
  • Rollover sur la flèche
  • Le lancement de la recherche nous fait revenir à l'état initial
  • Seattle, Washington, USA

Image cliquable pour voir l'exemple

Champ de recherche avec rollover et changement de couleur du fond

Références

Site web

Site de l'auteur

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

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]

Sa Si Dev

- Select pour le search avec Tuto

Caractéristiques

  • CSS, JS
  • Avec, dans le détail, deux composants : virtual-select.css et virtual-select.js
  • Sélection simple/multiple ou directe
  • Après saisie d'un caractère ou d'une présélection apparait le bouton RAZ
  • Superbe !

Image cliquable pour voir l'exemple

select box

Références

Site web

Tuto vu sur CSSScript

[Créé / modifié] [21-02-2022 / 21-02-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]

Scarpa Cosimo

Caractéristiques

  • Search box avec suggestions
  • CSS, JS, jQuery
  • Pas de possibilité d'annuler la recherche
  • Les suggestions se font dès le positionnement du curseur
  • Pas de lancement de la recherche
  • Londres, Angleterre

Image cliquable pour voir l'exemple

search box design avec suggestions

Références

Site web

Site de l'auteur

[Créé / modifié] [08-02-2022 / 08-02-2022]

Shanawany Yousef

Caractéristiques

  • Search box seule
  • CSS, JS, Angular (X6)
  • Beaucoup de dépendances
  • La zone de recherche couvre complètement le bandeau haut
  • Pour annuler la saisie il suffit de cliquer sur la croix
  • Pas de positionnement du curseur après le choix du 'search'

Image cliquable pour voir l'exemple

search box design avec angular

Références

Site web

[Créé / modifié] [08-02-2022 / 08-02-2022]

Sherif Omar

Caractéristiques

  • Search box seule
  • CSS pur
  • Pas de contrôle ni de lancement
  • Je mettrais bien un type 'search' plutôt qu'un type 'text' pour afficher la croix d'annulation de la saisie
  • Pas d'image que des icônes de police
  • Alexandrie, Égypte

Image cliquable pour voir l'exemple

search box en CSS pur

Références

Site web

[Créé / modifié] [14-04-2022 / 14-04-2022]

Shi Hangzhou

Caractéristiques

  • CSS pur
  • Animation de l'icône de la search box
  • La loupe se met de profil puis clignote façon curseur
  • Zhejiang, Chine

Image cliquable pour voir l'exemple

search box avec animation originale de la loupe qui se transforme en curseur

Références

Site web

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

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.
  • 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]