Bonjour à tous,

Je suis débutant en CSS et je n'arrive pas coder un champ de formulaire (moteur de recherche) avec une image rectangulaire en arrière-plan (+ idéalement une autre en survol) qui vient envelopper ce champ et son bouton OK.

Le code de mon formulaire (fonctionne) :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<div id="champ_recherche">
<form action="/spip.php?page=recherche" method="get">
<input type="text" name="recherche" id="moteur" alt="Recherche" class="Recherche" value="Recherche" />
<input name='page' value='recherche' type='hidden' />
<input type="submit" value=" ok " />
</form>
</div>
CSS :

1ere alternative :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#champ_recherche {
background-image: url(../../IMG/calques/moteur.png) no-repeat!important;
}
 
#champ_recherche hover {
background-image: url(../../IMG/calques/moteur-rollover.png) no-repeat!important;
}
 
#champ_recherche input[type=texte] {
width: 150px;
}
#champ_recherche input[type=submit] {
width: 30px;
}
ou :

2eme alternative :

Juste :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
#champ_recherche form {background-image: url(../../IMG/calques/moteur-rollover.png) no-repeat!important;
}
 
#champ_recherche input[type=texte] {
width: 150px;
}
#champ_recherche input[type=submit] {
width: 30px;
}
Aucune de ces 2 alternatives ne fonctionne... :-(

A L'AIDE SVP ... MERCI !