Changements d'état d'un input type text et CSS

Bonsoir !

J'essaye d'améliorer le rendu de mes formulaires (comme beaucoup) et j'avoue me heurter à un petit soucis technique ...
Le fonctionnement est simple (exemple sur un input type text) :
- une image en fond d'input en no-repeat car y figure le bord gauche de l'input aux coins arrondis
- un div qui vient se coller à sa droite afin de mettre un fond image pour le bord droit toujours aux coins arrondis.
- Un :hover sur le <dd> afin de faire changer l'image de fond de l'input et du bord droit
- Un :focus sur l'input afin de changer l'image de fond de l'input lorsque celui-ci est activé (= quand on entre du texte dedans)

Seulement voilà, j'arrive bien à faire changer l'image de fond de l'input sous l'état :focus mais je ne parviens pas à trouver la syntaxe adéquate pour qu'en même temps l'image de fond du bord droit change également ...

Je bosse en xhtml 1.0 STRICT et voici le code correspondant :

<form method="">
	<fieldset>
		<dl>
			<dt><label for="">Label</label></dt>
			<dd>
				<input class="input_text1" type="text" name="" />
				<div class="input_text1_right"></div>
				<div class="clearfloat"></div>
			</dd>
		</dl>
	</fieldset>
</form>

dt {
	display block;
}

.input_text1 {
	height: 24px;
	float: left;
	background: url(img_bg_and_left.png) no-repeat top left;
}

.input_text1_right {
	width: 2px;
	height: 24px;
	float: left;
	background: url(img_right.png) no-repeat;
}

dd:hover .input_text1 {
	background: url(img_bg_and_left_hover.png) no-repeat top left;
}

dd:hover .input_text1_right {
	background: url(img_right_focus.png) no-repeat;
}

.input_text1:focus {
	background: url(img_bg_and_left_focus.png) no-repeat top left;
}

Merci par avance pour votre aide et bonne fin de week end


PS: Ne faites pas attention à ma méthode pour rétablir les alignements avec clear: both;, je suis bien conscient qu'un div n'ai pas ce qu'il se fait de mieux mais j'ai quelques soucis de rendu parfois avec la méthode <br /> et pas le temps de résoudre ce soucis.
PS2: L'option de gérer ça avec JS ne m'intéresse pas ici car ça sera la finalité (l'année prochaine certainement), on a essayé d'intégrer Niceforms dans le moteur ce qui s'est pas trop mal déroulé mais je me heurte à de trop grosses différences d'affichage sous IE pour rendre possible un débogage vis à vis du temps restant avant mise en ligne.

Pour cerner plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses une page en ligne, cela donnerait une vision plus globale.

Oui en effet ça sera plus simlpe.
Donc voici une preview du problème à cette adresse
Attention, il y a un reset css consultable ici et concernant les images c'est par ici.

Voilà, vous avez tout
Merci par avance

Hello,

Petit jeux des sept erreurs (et remarques diverses):

1. Pour commencer, c'est le genre d'effet que je ferais sans image de fond, mais uniquement en CSS (un border qui va bien, et un peu de border-radius pour arrondir très légèrement les angles pour les navigateurs qui le supportent).

2. Ensuite, si jamais je faisais ça avec deux images de fond (note: dans certains cas c'est idiot, une seule image suffit...), j'utiliserais plutôt des éléments imbriqués et j'éviterais d'essayer de placer un INPUT et un DIV côte-à-côte au pixel près (dans le genre je recherche les ennuis... quoiqu'en float et hauteur fixe ça passe plutôt bien).

3. Avec le code HTML actuel, tu peux éventuellement utiliser le sélecteur .input_text1:focus + .input_text1_right pour viser le DIV de droite lorsque l'INPUT a le focus. Pas compatible IE6, et possible que ça foire dans IE7. Pour une meilleure compatibilité et pour plus de souplesse dans la structure HTML, il faudra passer par JavaScript (ajout et suppression d'une classe). Ça peut se faire en JavaScript pas classe en utilisant les attributs onfocus et onblur de l'INPUT. Ou bien en JS non-intrusif über-classe avec des dents blanches qui brillent.

4. Même pour un exemple, utiliser un label explicite fonctionnel (avec attribut for correctement renseigné) est Une Bonne Chose. Il faut en prendre l'habitude. Parce que.

5. La structure en liste de définitions est une bêtise. Pas une catastrophe, mais une bêtise.

6. Ce reset CSS est affreux. Bouh:
http://dl.getdropbox.com/u/145744/screens/bad-reset.png
(Les Reset CSS, de toute façon, çayleumal.)

7. Le dépassement des flottants et les retours à la ligne peuvent se gérer plus efficacement, effectivement. Mais pas avec un <br style="clear:whatever;" /> (mieux vaut un DIV ou SPAN vide si on utilise cette technique...), plutôt avec un contexte de formatage. En l'occurrence, un overflow:hidden sur le bon conteneur, ici le DD.

Bien je te remercie Florent pour tes remarques

1. Si tu me préconises de procéder ainsi quitte à créer des erreurs, je vais suivre cette voie.

2. Je prends note, si la première solution me parait hasardeuse, j'imbriquerais.

3. Cette solution par sélecteur me plait moins vu qu'elle n'est pas vraiment reconnue sous IE. Quand au JS, je viens de m'informer un peu sur la méthode non-intrusif ce qui me semble le plus intéressant, dans le cas où on le rend parfaitement accessible. Ça demande beaucoup de temps pour bien cerner l'affaire, ce qu'on n'a pas actuellement, donc je récupère les articles trouvés à ce sujet et nous potasserons pour mettre à jour l'été prochain.

4. Ok, même si c'est pas ma fonction de les remplir au final ^^

5. Bien je note aussi ^^ Que préconises-tu ? Sur Pompage, ils utilisent une simple balise <p> pour englober le label et le champs. Est ce mieux ?

6. Si je tiens à conserver un reset css, comment faudrait-il le corriger ?

7. Ok je mets ça dans mes notes afin de mettre à jour l'année prochaine également. (études qui reprennent ...)

Je me permets de faire remonter le topic pour avoir les réponses aux quelques questions en suspend
Bonne journée.