Champ formulaire + image de fond

tryan · 9 Avril 2011

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

Supermaury · 11 Avril 2011

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:

<!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>

tryan · 11 Avril 2011

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:

      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

Supermaury · 11 Avril 2011

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).

@++ !