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

问题描述：

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

它现在变灰了。没有打扰约使它成为一个活跃的环节，只是想改变字体，颜色等

UPDATE：必须在IE6，IE7 & FF工作

UPDATE： 这是比我更糟糕，虽然html的是<A id="someId" disabled>About Your Group</A>

UPDATE： 我要真的有看到什么是增加这个“已禁用”的链接。我认为这是一个jquery插件..（ui.tabs，jquery ui.tabs）

使用！在你的css中很重要 – ant 2010-02-17 09:41:34

你正在使用什么DOCTYPE？ – roosteronacid 2010-02-17 09:43:12

除非您要动态加载/生成HTML，否则不是jQuery即将禁用的属性。 – roosteronacid 2010-02-17 10:20:38

答

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

嗯有趣 – 2010-02-17 10:46:26

行为完全如您所述。你刚刚治好了我的头痛。 – Matijs 2011-04-04 11:48:09

答

我不知道超链接支持disabled属性的程度。确保你测试彻底。我看到CSS这个目标有两种方法：

CSS 2.1

你可以尝试CSS 2.1属性选择

a[disabled=disabled] { color: blue }

我认为这是最有可能与非工作表单元素。在IE < = 6. Quirksmode compatibility table中不起作用。

CSS 3

在CSS 3，有可能使用:disabled伪类（source）

input:disabled { background-color: yellow; }

在任何IE不起作用包括8.工程在Firefox，铬和歌剧。 Quirksmode compatibility table

我从来没有见过disabled在一个普通的超链接上使用，所以你将不得不尝试是否有效。根据规范，disabled伪类仅用于禁用表单元素。

这些没有工作，恐怕[禁用]可能会定位它，但不能覆盖文本颜色。 – 2010-02-17 09:54:11

@Lee如果它可以定位它，我相信你可以覆盖它。这是一个正常的超链接？你可以尝试！重要吗？（然后你可以使用Firebug来找出违规定义的位置。） – 2010-02-17 09:58:15

！重要的是我第一次尝试。 – 2010-02-17 09:59:16

答

我不认为这是对超链接的“禁用”属性（反正它不尊重W3C recommandations），但你可以尝试添加类造型这些元素，如：

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

而对于CSS：

a.inactive { 
    color:#000 
}

答

我注意到，ASP.Net把禁用=“禁用”在上<asp:HyperLink>设置Enable属性false时个标签。

这将导致CSS规则该元素在IE中被忽略（即使是a[disabled="disabled]！），这是非常恼人。其他浏览器不关心，因为他们忽略了财产。

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

做这个服务器端而不是使用JavaScript的好处是，即使用户关闭JavaScript，它也能工作。

它也适用于LinkButtons，它们没有NavigateUrl属性。所以我去了[禁用=禁用] {颜色：灰色！重要;文字装饰：无！重要; }在CSS中。可能不符合这个问题的全部要求，但对我来说足够好。 – Colin 2012-04-19 08:59:47

答

WHE你使用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，这样的样式可以被应用，链接不起作用。

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

相关推荐