Discussion :

[mattheox]

Bonjour,
Est-il possible d'appliquer un style sur toutes les balises input>text d'un formulaire qui ont l'attribut 'readonly' d'activer sans pour autant ajouter le nom de la class dans l'attribut... pour le navigateur IE?
Car pour Firefox, on peut faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input[readonly] {
...
}

mais ça ne fonctionne pas sous IE.

Cordialement
Matthieu

[Lcf.vs]

je pense que ceci devrait aller:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" name="username" size="40" value="<?php echo $modif['username']; ?>" readonly>

ensuite, ne voulant passer par un class, ben, tu l'entoures des balises que tu veux pour lui donner le style de ton choix... non?

[Bisûnûrs]

Il me semble que ça fonctionne sur IE7, mais pas sur IE6, donc tu n'as pas le choix que de créer une classe spécifique si tu veux aussi que ton style s'affiche sur IE6.

[Lcf.vs]

mais... ne peut-il pas se passer de class pour le mettre en div, par exemple?

à ma connaissance, on est pas obligé de définir une class...

'fin, encore une fois, ça fait qu'un peu plus de trois semaines que je code, hein...

[Bisûnûrs]

Le mettre en div ? Explique ta pensée.

Et pour faire ce qu'il souhaite, si, tu es obligé de définir une classe pour IE6.

[Lcf.vs]

ben, je m'disais qu'en mettant en un bloc tous ses champs readonly, il les div, et ensuite, il met le reste, ça ne peut pas fonctionner?

[Bisûnûrs]

Je ne connais pas le verbe "diver", donc ta pensée reste obscure ...

Et puis tu ne peux pas regrouper tous les champs en readonly, le formulaire n'aurait plus aucune cohérence.

[mattheox]

j'apporte une précision :
si j'ai le code HTML suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" readonly="readonly" name="toto" class="recherche"/>
<input type="text" name="toto" class="recherche"/>

le css définit suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.readonly {
   background-color:red;
}
.recherche {
   background-color:blue;
}

je voudrais que le 1er champ soit en rouge (il a l'attribut readonly) et le 2ème champ en bleu automatiquement, sans que je n'ai ajouté dans le html la class "readonly".

Pour FF, si j'écris dans mon style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input[readonly] {
   background-color:red;
}

ça va fonctionner... mais ce code ne fonctionne pas sous IE.
Pour IE, j'ai trouvé une solution avec javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function setCssOnReadonly() {
	for (var i = 0; i < document.forms.length; i++) {
		var elements = document.forms[i].elements;
		var element = null;
		for (var j = 0; j < elements.length; j++) {
			element = elements[j];
			if (element.getAttribute("readonly")) {
				$(element).addClassName("readonly");
			}
		}
	}
}

mais je voulais savoir si on pouvait faire ça sans JS comme on peut le faire sous FF....

[Bisûnûrs]

Comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" readonly="readonly" name="toto" class="readonly"/>
<input type="text" name="toto" class="recherche"/>

[mattheox]

Comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" readonly="readonly" name="toto" class="readonly"/>
<input type="text" name="toto" class="recherche"/>

j'ai oublié de préciser que je ne veux pas modifier le HTML ;-)
je dois pouvoir affecter un style css aux champs qui ont l'attribut "readonly" sans pour autant modifier le HTML... comme on peut le faire avec FF...
mais visiblement, on ne peut pas le faire sous IE6 ;-(

[Bisûnûrs]

mais visiblement, on ne peut pas le faire sous IE6 ;-(

C'est ce que je te dis depuis le début ...