Barre de recherche.

Bonjour à vous,

en fait, j'ai une barre de recherche où j'aimerais rajouter une flèche à gauche pour revenir en arrière (à côté du placeholder "Rechercher ...").

J'ai essayé avec le pseudo-élément :: before et j'ai également essayé en ajouter un bouton avant le champ input (champ avec placeholder "Rechercher ...") mais je n'arrive pas à bien aligner les éléments.

Avez-vous une idée de la façon dont je pourrais m'y prendre pour résoudre ce problème-là.

Vous pouvez trouver le code de ma barre de recherche ci-dessous avec codepen :

https://codepen.io/joseph5/pen/LYVJxXB

Merci d'avance

Passez un agréable dimanche.
Thierry
Modifié par THIRT05 (22 Mar 2020 - 11:11)

Hello,
Pourquoi tu ne rajoute pas tout simplement un picto en img ?
Tu vas sur flaticon, tu choisis un picto flèche ou ce que tu veux, tu le télécharge en svg et comme ça tu le place comme tu veux et tu peux même changer la couleur en css

Salut Stryk,

je tenais à vous remercier pour votre réponse.

Et comment puis-je faire cela en CSS ?

J'aimerais bien que quand je clique sur cette flèche, que je puisse exécuter une action en javascript comme revenir à la situation initiale (donc, pouvoir intervenir en javascript).

Merci d'avance

Sincères salutations,
Thierry

Hello,

bon je n'ai pas tout corrigé mais sache que c'est la bazar
Et là tu n'as qu'un header avec un input ... attention à la construction c'est important de bien architecturer !!!
Voici pour la partie avec les SVG à la place de tes background-image, avec centrage vertical de tout ça:
https://codepen.io/exemple/pen/dyoqQJe
N'hésites pas si tu veux qu'on structure tout ça correctement
Modifié par stryk (23 Mar 2020 - 12:26)

Salut Stryk,

merci pour votre réponse.

Je vais essayer d'intégrer votre solution dans ma page.

Merci de me proposer votre aide. J'en aurai certainement besoin.

En effet, ça paraît tout simple mais c'est un véritable casse-tête.

Je vous tiens au courant.

Merci encore pour votre aide.

Bonne fin de journée
Thierry

THIRT05 a écrit :
En effet, ça paraît tout simple mais c'est un véritable casse-tête

Oui je comprends tout à fait, on a tous commencé comme ça ne t'inquiète pas

Bonsoir Stryk,
merci pour votre aide et merci de me rassurer à ce niveau-là.
Le positionnement est un concept assez complexe en CSS, je trouve.
Par exemple, quand on a une image et un texte à côté et qu'on doit aligner les éléments, ce n'est pas toujours évident.
Enfin, rien de tel que la pratique mais ça prend du temps.
Je vais donc essayer d'intégrer votre solution dans ma version.
Encore merci pour votre aide.
Bonne soirée
Thierry