28 octobre 2017 à 20:08:35

Bonjour,

Je souhaiterais faire une barre de recherche qui comporterait une loupe à l'intérieur, et sur laquelle on cliquerait pour soumettre la recherche.

<form method="post" action="traitement.php">
								<p>
									<input type="search" placeholder="Rechercher" name="lookup" id="lookup" />
									<span class="icone-loupe" type="submit"></span>
								</p>
							</form>

Quand je survole la loupe, rien ne se passe, comme si il ne s'agissait pas d'un bouton pour soumettre la recherche... Ai-je fait une erreur?

Merci pour votre aide,

-
Edité par Madouh 28 octobre 2017 à 20:09:10

Anonyme

28 octobre 2017 à 20:10:12

Il faudrait un input plutôt qu’un Span. Bonne soirée

Madouh

29 octobre 2017 à 11:47:26

Salut,

merci pour ta réponse.

Si je fais

<input class="icone-loupe" type="submit" />

alors ce n'est pas ma loupe qui s'affiche, c'est un bouton "Envoyer"...

Anonyme

29 octobre 2017 à 12:15:16

Tu peux nous envoyer ton css?

EDIT: utilises plutôt un <button type=‘submit‘><span class=‘icone-loupe‘></span></button>

ps: desole je ne peux pas mettre de code je suis sur iPhone

-
Edité par Anonyme 29 octobre 2017 à 12:17:47

Madouh

29 octobre 2017 à 13:15:20

Effectivement, si je fais un

<button id="loupe" type="submit" class="icone-loupe"></button>

ça marche! Merci à toi

Mais la loupe apparaît sur un bouton à part entière.

Comment faire pour qu'elle soit à l'intérieur de la barre de recherche, comme ceci?

Anonyme

29 octobre 2017 à 14:10:53

<!DOCTYPE HTML>
<html>
	<head>
		<title>Test par 13Maras</title>
		<style>
			.rechercher { position: relative; }
			.rechercher input[type="text"] { position: absolute; left: 0; width: 100%; }
			.rechercher button[type="submit"] { position: absolute; right: -4px; }
		</style>
	</head>
	<body>
		<form class="rechercher" method="GET" action="rechercher.php">
			<input type="text" placeholder="Rechercher">
			<button type="submit">Q</button>
		</form>
	</body>
</html>

Voilà Le résultat:

EDIT: Bien évidemment, dans le button tu mets le span avec la classe icône-loupe

-
Edité par Anonyme 29 octobre 2017 à 14:13:05

Madouh

29 octobre 2017 à 14:21:55

ça marche, merci !

Pour ma loupe, j'ai appliqué le CSS suivant:

border: none;
background-color: none;

mais on voit encore le fond...

Comment faire pour l'enlever?

EDIT: j'ai fait un

 background-color: rgba(255,255,255,0);

et on ne voit plus le fond de ma loupe! Tout simplement!

Merci encore pour ton aide!

-
Edité par Madouh 29 octobre 2017 à 14:24:31

FranckEliséeFréjusLaba

30 janvier 2019 à 10:06:05

bonjour puis je avoir un code pour creer une barre de recherche avec loupe a l'intérieur de la barre de recherche

dacorddacord

12 mai 2020 à 11:27:21

Salut tous le monde, j'aime avoir le code CSS des balises qui suit

<form name="formbarre"> <input type="text" name="barre" id="barre" value= "recherche..." /> <input type="button" onclick="rechercher() " value="start" /> </form>

AbcAbc6

12 mai 2020 à 12:12:41

@dacorddacord Bonjour, merci de ne pas déterrer d'ancien sujet résolu.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Forums des Zéros

Barre de recherche - loupe

Déterrage

Barre de recherche - loupe

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs