Champ formulaire + image de fond

**le Sam Avr 09, 2011 15:08**

Bonjour,

Je teste l'intégration d'une image de fond concernant un simple formulaire sur un champ de type "text" et" submit" en utilisant un sprite css. Après quelques galères, je suis parvenus à mes fins mais je me demande si ma méthode est bonne et si il n'y a pas plus simple :?:

Le lien de mon teste -http://annonce-vacance.com/css/formulaire.html

Pour que mon teste fonctionne, il a fallut que j'utilise un hack css pour IE concernant la taille du champ text

Testé sous IE FF et Chrome.

Si vous avez mieux, je suis tout ouï

.

Merci

**le Lun Avr 11, 2011 9:57**

Si ça peut t'aider, je la jouerais comme ça (ça a l'air ok sous IE/FF/Chrome/Opera).
Par contre, pas testé sur IE9.
+++

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> form, input {display:inline;vertical-align:middle;margin:0;padding:0} fieldset { padding:10px; border:1px solid #000-; O-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px } #bg_recherche { float:left; margin:0; padding:0; border:0; width:235px; height:38px; background:url(form.png) 0 0 no-repeat; } #recherche { border:0; background:none; width:200px; margin:9px 15px 0 15px; font:normal 11px verdana,tahoma,arial; color:#fff; } #valider { border:0; width:58px; height:38px; background:url(form.png) -248px -0 no-repeat; font-size:0 } </style> </head> <body> <form id="formulaire" name="formulaire" method="get" action="#"> <fieldset> <div id="bg_recherche"> <input type="text" id="recherche" name="recherche" value="Rechercher" onFocus="if(value=='Rechercher') this.value='';" onBlur="if(value=='') this.value='Rechercher';" /> </div> <input type="submit" id="valider" name="valider" value="Ok" /> </fieldset> </form> </body> </html>

**le Lun Avr 11, 2011 13:47**

Salut,

Merci de ta réponse Supermaury

.

Bon, après vérification, je préfère nettement ta méthode

cependant, il y a 2 points avec lesquels j'ai du mal et dont je ne trouve pas de réponse sur le web :

Code: Tout sélectionner: border:1px solid #000-; O-border-radius: 15px;

A quoi sert le tiret après #000-?
Késako que "O-border-radius", du moins pour quelle navigateur?

Merci

**le Lun Avr 11, 2011 14:22**

Alors, le tiret dans la couleur, c'est une joile coquille de ma part

A retirer donc.
Et le préfixe O- c'est pour Opéra. D'ailleurs là aussi j'ai fait une coquille, il faut un tiret devant : -O- (j'ai passé le code au validateur mais pas la feuille de style oups).

@++ !

Champ formulaire + image de fond

Champ formulaire + image de fond

Re: Champ formulaire + image de fond

Re: Champ formulaire + image de fond

Re: Champ formulaire + image de fond

Lectures recommandées sur ce thème :

Qui est en ligne