Modifier l'apparence d'un lien désactivé

Question

Est-il possible de modifier l'apparence d'un lien HTML lorsqu'il est désactivé? Par exemple en utilisant quelque chose comme:

a.disabled 
{ 
    color:#050; 
} 

<a class="disabled" disabled="disabled" href="#">Testing</a> 

L'exemple ci-dessus ne semble pas fonctionner avec IE mais fonctionne pour Firefox, sur IE il reste gris même quand je mets la couleur dans le style. Si je supprime le disabled="disabled" cependant cela fonctionne.

Answer 1

La :disabled classe pseduo fonctionne uniquement avec les champs d'entrée, comme le texte, la radio, case à cocher, etc. et applique lorsque vous donnez l'élément `l'attribut disabled = « désactivé ». IE6, cependant, ne reconnaît pas la classe pseudo, vous devrez donc utiliser une classe séparément pour le faire fonctionner.

<input type="text" value="You can't type here" disabled="disabled" class="disabled" /> 

peuvent être coiffés avec

input[disabled="disabled"], input.disabled { 
    /* whatever you want */ 
} 

La classe pseudo appliquera aux navigateurs modernes alors que la classe couvrira IE6. Comme l'a dit Radeksonic, si vous voulez que le CSS désactivé apparaisse sur d'autres éléments, comme les ancres, il vous suffira de créer et d'utiliser une classe. Il n'y a pas l'attribut désactivé pour <a> de

Answer 2

Utilisez

a.disabled 
{ 
    color: #CCC;/* Just an example */ 
} 

Il suffit d'utiliser un point suivi d'un nom de classe pour indiquer que vous souhaitez utiliser cette classe.

Il fonctionne dans tous les navigateurs

Answer 3

< a class = "désactivé"> Mon lien désactivé </a>

a.disabled { 
    display:none; 
} 

Il n'y a que 5 (je pense) pseudo-class selectors for links: lien, visité, vol stationnaire, et actif et focus.

Answer 4

Pour un lien comme celui que vous avez fourni dans le commentaire:

<a href="#" disabled="disabled">some link</a> 

Le style serait (comme tout autre sélecteur basé sur un attribut):

a[disabled=disabled] { 
    color: red; 
    font-weight: bold; 
} 

Si j'étais à votre place, je vérifierais pour le comportement cross-navigateur, cependant. Je n'ai pas vu l'attribut disabled utilisé auparavant.

Answer 5

Bien sûr, simplement ajouter une classe pour styliser vos éléments <a> d'une manière particulière ne va pas les empêcher d'effectuer leur action normale. Pour cela, vous aurez besoin de JavaScript. De façon basique, vous pourriez avoir:

<a href="foo.htm" class="disabled" onclick="return false;">linky</a> 

Answer 6

si vous utilisez JQUERY, vous pouvez ajouter l'attribut pour ancrer

.attr("disabled","true") 

et retirez-le

.removeAttr("disabled") 

Answer 7

Vous pouvez utiliser le attribute selector pour le plein support du navigateur.

Cela suffit:

a[disabled] { 
    display:none; 
} 

---

SELECTORS ATTRIBUT

[att]  

match lorsque l'élément définit l'attribut "att", quelle que soit la valeur de l'attribut.

[att=val] 

Correspond lorsque la valeur de l'attribut "att" de l'élément est exactement "val".

[att~=val] 

représente un élément avec l'attribut att dont la valeur est une liste séparée de l'espace blanc de mots, dont l'un est exactement « val ». Si "val" contient un espace blanc, il ne représentera jamais rien (puisque les mots sont séparés par des espaces). Si "val" est la chaîne vide, elle ne représentera jamais rien non plus.

[att|=val] 

représente un élément avec l'attribut att, sa valeur étant soit exactement "val" ou en commençant par "val" immédiatement suivie par "-" (U + 002D). Ceci est principalement destiné à permettre des correspondances de sous-codes de langue (par exemple, l'attribut hreflang sur l'élément a en HTML) comme décrit dans BCP 47 ([BCP47]) ou son successeur. Pour la correspondance des sous-codes lang (ou xml: lang), veuillez consulter: pseudo-classe lang.