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

Question

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

目前它是灰色的。不关心使它成为活动链接，只想更改字体、颜色等。

更新：必须在IE6、IE7和FF中工作。

更新： 情况比我想象的还要糟糕，HTML是<A id="someId" disabled>About Your Group</A>

更新： 我真的需要看看是什么将这个“禁用”添加到链接中... 我认为这是一个jquery插件.. (ui.tabs, jquery ui.tabs)

- Lee Englestone

---

在你的 CSS 中使用 !important。 - ant

除非您正在动态加载/生成HTML，否则不是jQuery放置禁用属性。 - cllpse

Answer 1

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

当设置此属性时，Internet Explorer会在链接上放置一个斜角效果。而FireFox则完全忽略此属性。 注意： 链接仍然可以使用。它们的默认行为没有被阻止 - 它们只是看起来被禁用了。它们不像禁用的文本输入框那样行为。

最好使用一个类来表示链接是否已禁用。这也可以跨浏览器工作...：

CSS：

.disabled { color: #ccc; }

The HTML

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

为了完善禁用效果，使用jQuery，您可以选择所有class为“disabled”的链接并阻止它们的默认行为，如下所示：

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

- cllpse

---

行为完全符合您所描述的。您刚刚解决了我的头痛问题。 - Matijs

Answer 2

我注意到当在<asp:HyperLink>中将Enable属性设置为false时，ASP.Net会在<a>标签上添加disabled="disabled"。这会导致IE忽略该元素的css规则(即使是对于a[disabled="disabled]！)，非常烦人。其他浏览器不会在意，因为它们忽略了该属性。

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

使用此方法的优点是，在服务器端进行操作，而不是使用JavaScript，即使用户已禁用JavaScript也能够正常使用。

- mflodin

---

它也对LinkButtons进行了相同的操作，而且它们没有NavigateUrl属性。因此，我在CSS中使用了a[disabled=disabled]{color:Gray !important; text-decoration:none !important; }。可能不能完全满足这个问题的全部要求，但对我来说已经足够了。 - Colin

Answer 3

我不知道超链接的disabled属性支持到什么程度。请确保进行彻底测试。

我看到有两种方法可以在CSS中定位：

CSS 2.1

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

a[disabled=disabled] { color: blue }

我认为这个方法最适用于非表单元素。在IE <= 6中无法使用。Quirksmode兼容性表。

CSS 3

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

input:disabled {  background-color: yellow; }

在任何IE浏览器中都无法正常工作，包括IE8。但在Firefox、Chrome和Opera浏览器中可以正常工作。Quirksmode兼容性表

我从未见过在普通超链接上使用disabled，所以您需要尝试是否有效。根据规范，disabled伪类仅适用于禁用的表单元素。

- Pekka

---

很抱歉，这些方法都没有起作用。虽然可以使用a[disabled]来定位它，但无法覆盖文本颜色。 - Lee Englestone

@Lee 如果它可以被定位，我相信你可以覆盖它。这是一个普通的超链接吗？你可以尝试使用!important。 （然后您可以使用Firebug找出哪个定义有问题。） - Pekka

@Lee，你能展示一下你在使用的禁用链接标记吗？我尝试重现它，但没有任何变灰。 - Pekka

这个jQuery插件（ui.tabs）可能也会干扰DOM。 - Lee Englestone

Answer 4

当您使用ASP.NET并在服务器端禁用时，生成的HTML是带有非标准属性“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样式，添加此非标准过滤器属性（仅适用于IE）：

filter: alpha(opacity=50);

您还需要使用一些JavaScript，例如jQuery，以删除有问题的禁用属性。即：

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

如果您的情况更加奇怪，且您使用了disabled和href，那么您应该同时删除href，这样样式就能够被应用而链接也不会起作用。

- JotaBe

Answer 5

我认为超链接没有“disabled”属性（无论如何，它不遵守w3c建议），但您可以尝试添加类来为这些元素设置样式，例如：

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

关于 CSS 的部分：

a.inactive {
  color:#000
}

- camilleb