How to override the style of hidden hyperlinks?

Question

Is it possible to override the style applied to the hyperlink if it has the attribute disabled="disabled" ?

It is currently inactive. Do not worry about making it an active link, just want to change the font, color, etc.

UPDATE: Should work in IE6, IE7 and FF

UPDATE: This is worse than me, although the html <A id="someId" disabled>About Your Group</A>

UPDATE: I really need to see what this “disconnected” is adding to the links. I think this is a jquery plugin .. (ui.tabs, jquery ui.tabs )

Answer 1

The disabled property cannot be used for a elements. it applies only to input , select and button elements.

Of course; Internet Explorer creates a bevel effect for links with this set of properties. FireFox, on the other hand, completely ignores this property.

Note. Links will still work. Their default behavior is NOT prevented - they just look disconnected. They do not behave like disabled text input.





You better use a class to signal if the link is disabled. This will also work in a cross browser ...:

CSS

 .disabled { color: #ccc; } 

HTML

 <a href="..." class="disabled">...</a> 

And to complete the disabled effect; using jQuery, you can select all links with the "disabled" class and prevent their default behavior, for example:

 $(function () { $("a.disabled").click(function () { // return false to disable the link (preventDefault = true) return false; }); }); 

Answer 2

I noticed that ASP.Net puts disabled = "disabled" in the <a> tags when setting the Enable property to false on <asp:HyperLink> .

This causes the css rules for this element to be ignored in IE (even for a[disabled="disabled] !), Which is extremely annoying. Other browsers don't care because they ignore this property.

My solution was to simply set the NavigationUrl property to null in the code for the elements I wanted to disable.

The advantage of this server side instead of JavaScript is that it will work even if users have JavaScript disabled.

Answer 3

I do not know how the disabled attribute is supported for hyperlinks. Make sure you thoroughly test. I see two ways to orient this in CSS:

CSS 2.1

You can try CSS 2.1 attribute selector

 a[disabled=disabled] { color: blue } 

I think this will most likely work with the non-form element. Doesn't work in IE <= 6. Quirksmode compatibility table .

CSS 3

In CSS 3, you can use the pseudo-class :disabled ( source )

 input:disabled { background-color: yellow; } 

does not work in any IE, including 8. Works in Firefox, Chrome and Opera. Quirksmode Compatibility Chart

I have never seen disabled , which is used for a normal hyperlink, so you have to try to see if this works. According to the specification, the disabled class pseudo-class is intended only for disabled form elements.

Answer 4

You are using ASP.NET and you will disable LinkButton on the server side, the html generated <a> tag with disabled="disabled" non-standard attribute. However, there is no href attribute, so the link will not behave like a link in any of the browsers.

The problem is that IE adds the typical “bevel effect” to the disabled link, and other browsers display it as “plain text”.

You can solve the problem in non-IE browsers this way:

 a:not([href]) /* this is for ASP.NET disabled links */ { opacity: .5; /* all but IE before 9 */ } 

The problem is that IE (at least until IE 8) continues to make a bevel effect for the disabled link. To make IE behave like other browsers, you need to change the CSS style by adding this non-standard attirbute filter (works only for IE):

filter: alpha(opacity=50);

And you also need to use javascript, i.e. jQuery to remove the offending disabled attribute. I.e.

$('#controlId').attr('disabled','')

If your case is even weirder, and you have disabled and href , you must also remove href so that the style can be applied and the link does not work.

Answer 5

I don’t think there is a “disabled” attribute for the hyperlink (in any case, this does not comply with the w3c recommendations), but you can try adding a class to style these elements, for example:

 <a class="inactive" ...>...</a> 

And for css:

 a.inactive { color:#000 }