pertinence de button[disabled="disabled"] ?

Salut

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

Code:

---

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

---

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

Code:

---

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

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.

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 ?

++

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

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

Citation:

---

Envoyé par 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.

---

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 :$)

Citation:

---

Envoyé par Erwan31

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 :

Citation:

---

Envoyé par HiRoN

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

---

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 ?

Citation:

---

Envoyé par ZedroS

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:

---

#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/

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.

merci bien :)

je ne suis pas certain pour IE6, et mon "product owner" est en réunion intensive... Mais si besoin clairement je passerai par une classe spécifique, aucun pb.

A noter que j'ai trouvé ces liens comme "références" sur le sujet, si cela intéresse qq'un :
http://reference.sitepoint.com/css/attributeselector
http://reference.sitepoint.com/css/pseudoclass-hover

Par contre je n'ai rien trouvé pour la partie button de mon code css :

Code:

---

button[disabled="disabled"]

---

En effet, ce code css à propos d'un "button" s'applique aussi, dans le cas de FF 3 au moins, à cet html là :

Code:

---

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

---

sauriez vous à quoi c'est dû ???

Je ne comprends pas bien ton problème sur le button.
Pour les implémentations voir aussi cette l'excellent Webdevout: http://www.webdevout.net/browser-sup...#css2selectors
Tu as parfois des précisions (grâce à une info-bulle au mousehover) sur les bugs.
Pour d'autre type d'infos voir la home http://www.webdevout.net/

re

Le bout d'html que j'ai cité était "foireux", je viens de le corriger.

du coup je retombe sur mes pattes, le CSS parle de button et ma balise html aussi, ça colle, question close ;)

Par contre il apparait qu'il vaut mieux utliser

Code:

---

<input type="button" value="Go"/>

---

afin de ne pas avoir de surprise avec IE (cf http://reference.sitepoint.com/html/button)

bref, sujet résolu et grand merci pour votre aide :D