Question

如果超链接具有disabled="disabled"属性，是否可以覆盖应用于超链接的样式？

它目前是灰色的。不要把它变成一个活跃的链接，只想改变字体，颜色等。

更新必须在IE6，IE7和＆amp; FF

更新： 虽然html是<A id="someId" disabled>About Your Group</A>

，但它比我更糟糕

更新： 我真的要看看是什么将这个'禁用'添加到链接中..我认为它是一个jquery插件..（ui.tabs，jquery ui.tabs）

Answer 1

disabled元素不能用于a元素。它仅适用于input，select和button元素。

不确定; Internet Explorer对具有此属性集的链接设置了斜角效果。另一方面，FireFox完全忽略了这个属性。

注意： 链接仍然有效。不会阻止它们的默认行为 - 它们看起来只是禁用。它们的行为不像禁用的文本输入。

如果禁用链接，最好使用类来发出信号。这也适用于跨浏览器......：

CSS

.disabled { color: #ccc; }

HTML

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

完成残疾人效果;使用jQuery，您可以选择“禁用”类的所有链接并防止其默认行为，如下所示：

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

Answer 2

我注意到在<a>上将Enable属性设置为false时，ASP.Net会将<asp:HyperLink>个标记设为已停用=“已停用”。

这导致在IE中忽略该元素的css规则（即使对于a[disabled="disabled]！），这非常烦人。其他浏览器并不关心，因为他们忽略了该属性。

我的解决方案是在我想要禁用的元素的代码隐藏中简单地将NavigationUrl属性设置为null。

使用此服务器端而不是使用JavaScript的优势在于，即使用户关闭了JavaScript，它也能正常工作。

Answer 3

我不知道超链接支持disabled属性的程度。确保彻底测试。我在CSS中看到了两种定位方法：

CSS 2.1

您可以尝试使用CSS 2.1属性选择器

a[disabled=disabled] { color: blue }

我认为这最有可能与非表单元素一起使用。在IE中不起作用＆lt; = 6. Quirksmode compatibility table。

CSS 3

在CSS 3中，可以使用:disabled伪类（source）

input:disabled {  background-color: yellow; }

在任何IE浏览器中都不起作用，包括8.适用于Firefox，Chrome和Opera。 Quirksmode compatibility table

我从未在普通超链接上看到disabled，因此您必须尝试是否有效。根据规范，disabled伪类仅用于禁用表单元素。

Answer 4

当您使用ASP.NET，并且在服务器端禁用LinkButton时，生成的html是<a>标记，其中包含disabled="disabled"非标准属性。但是，没有生成href属性，因此链接的行为不会像任何浏览器中的链接一样。

问题在于IE为禁用的链接添加了典型的“斜角效果”，其他浏览器将其渲染为“常规文本”。

您可以在非IE浏览器样式中解决此问题：

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

问题是IE（至少达到IE 8）一直在禁用链接上做“斜面”效果。要使IE的行为与其他浏览器一样，您需要更改CSS样式，添加此非标准过滤器attirbute（仅适用于IE）：

filter: alpha(opacity=50);

你还需要使用一些javascript，即jQuery来删除违规的禁用属性。即。

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

如果您的情况更加奇怪，并且您有disabled和href，则还应删除href，以便可以应用样式且链接不起作用

Answer 5

我认为超链接没有'禁用'属性（无论如何它不尊重w3c推荐）但你可以尝试添加类来设置这些元素的样式，如：

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

对于css：

a.inactive {
  color:#000
}

如何覆盖禁用的超链接样式？

5 个答案: