Discussion :

[joseph_p]

Salut

J'ai récemment eu le besoin de changer le look d'un bouton "disabled", autrement dit un bouton défini ainsi :

Code :

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

<button id="test2" disabled="disabled" name="test" type="submit">Send test mail</button>

Pour cela, j'ai utilisé le CSS suivant :

Code :

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

1
2
3
4
5
6
7
8
button[disabled="disabled"],button[disabled="disabled"]:hover {
	padding: 0px 6px 0px 6px;
	border: 2px outset ButtonFace;
	color: GrayText;
	cursor:default;
	background: #FF5000 url(bg_submit.gif) top left repeat-x;
 
}

J'arrive pas à trouver dans quelle mesure cette approche est pertinente, notamment si elle est valable pour tous les navigateurs...

Quelqu'un a des pistes ?

merci d'avance

++
joseph

[Erwan31]

Bonsoir,
je comprends pas très bien le sens de ta question. La valeur disabled ne fait que répondre à un besoin temporaire de désactivation d'un champ, bouton... Il n'est pas question de choix pertinent ou pas ici.

[joseph_p]

hum, en fait ma question est de savoir si l'utilisation de button[disabled="disabled"] en CSS est pertinente. Essentiellement, cela est dû au fait que je n'ai pas réussi à savoir si cela était cross browser : cela risque t il de ne pas marcher avec des navigateurs X ou Y ?

++

[Erwan31]

Les sélecteur d'attribut (sélecteur[attribut="valeur"]) et toutes ses dérivés plus précises n'ont pas été implémenté par IE6-, les autre navigateurs l'implémentent sans problème à ma connaissance.
Mais c'est une question d'implémentation, pas de pertinence.

[HiRoN]

Bonjour,
Personnellement, je dirai qu'il y a plus simple pour un même rendu... (class, héritage)
Edit : Yop Erwan31

[joseph_p]

Les sélecteur d'attribut (sélecteur[attribut="valeur"]) et toutes ses dérivés plus précises n'ont pas été implémenté par IE6-, les autre navigateurs l'implémentent sans problème à ma connaissance.

Merci !

Juste pour ma culture (et pouvoir en parler au taff ^^), serait il possible d'avoir un lien ou une source pour cela ? A défaut je chercherai moi même hein, pas de soucis (même si je l'ai déjà fait sans trop de succès :$)

Mais c'est une question d'implémentation, pas de pertinence.

En effet Toute remarque sur la pertinence est également bienvenue, vu que je trouve cette solution bien appropriée.

Pour rebondir sur cette remarque et celle ci :

Personnellement, je dirai qu'il y a plus simple pour un même rendu... (class, héritage)

Hum, je ne suis pas si certain perso, mais parlons en

Pourriez vous détailler quelles autres options vous voyez ?

Perso je vois surtout celle de mettre une class spécifique pour réaliser le design voulu, mais cette classe ne ferait que dupliquer l'info déjà présente avec disabled="disbabled", sachant que j'utilise un framework qui l'ajoute "automatiquement" lorsqu'il génère la page (lui faire ajouter une autre classe serait plus compliqué).

Qu'en dites vous ?

[HiRoN]

Perso je vois surtout celle de mettre une class spécifique pour réaliser le design voulu, mais cette classe ne ferait que dupliquer l'info déjà présente avec disabled="disbabled", sachant que j'utilise un framework qui l'ajoute "automatiquement" lorsqu'il génère la page (lui faire ajouter une autre classe serait plus compliqué).

Vu comme cela, c'est sur que se sera soit l'un, soit l'autre...
Personnellement, je voyais du type (dans l'idée) :

Code CSS :

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

#div_parent input { /* Code */ }

Mais tout dépend de la construction de la page (tout de même limité) et cela est certes moins précis que le button[disabled="disabled"],button[disabled="disabled"]:hover (mais implémenté par IE6- ? (me semble-t-il, à vérifier))

Pour bien apprendre CSS suis ces tutoriels et cours CSS : http://css.developpez.com/cours/

[Erwan31]

Ben tout dépend si tu dois prendre en compte IE6 ou pas.
Si c'est la cas il vaut mieux passer par un simple class="disabled" par exemple.