Passer le :focus à un élément parent

Salut,

Comme dit dans le titre est-il possible de signifier à une balise parent que son enfant à le focus et que donc d'une certaine manière lui aussi ...

Exemple HTML :

<label>URL : <br /><div class="text"><input type="text" name="url" class="text" value="<? echo $row['url']; ?>"/></div><br /></label>

et CSS :

div.text:hover, div.text:focus {
	background: url(Design/bg_text_on.png) left top no-repeat;
}
div.text input {
	width: 290px;
}

Dans le cadre de cet exemple peut-on ajouter une régle à l'input pour qu'il "transmette" le focus à son père ?

Salut,

pour commencer ton code est invalide puisque l'élément LABEL ne peut pas avoir comme enfant un élément DIV. Par ailleurs et pour des raisons d'accessibilité il faut utiliser l'attribut for pour le relier à un élément INPUT. Pour finir il est plus facile de styler des paragraphes (éléments P) que des BR.

Ton code devrait donc ressembler à cela :

<p><label for="url">URL : </label></p>
<p class="text"><input type="text" name="url" id="url" value="33" /></p>

Pour ce qui est de ta question les sélecteurs css ne permettent pas de cibler un élément parent. Il faudra donc utiliser JavaScript :

p.text:hover, .focused {
	background: red;
}

p.text input {
	width: 290px;
}

<p><label for="url">URL : </label></p>
<p class="text"><input type="text" name="url" id="url" value="33" onfocus="this.parentNode.className +=' focused'" onblur="this.parentNode.className ='text'" /></p>

Merci,

Oui je sais que c'est vraiment pas joli joli mais c'est pour une zone privée... ceci dit je vais refaire ça quand même..
Merci pour l'astuce, je me doutais que javascript m'aiderais sur ce cas.

De rien !

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.