【问题标题】:Change the appearance of a disabled link更改禁用链接的外观
【发布时间】:2017-03-23 18:59:07
【问题描述】:

是否可以在禁用时更改 html 链接的外观?例如使用类似的东西:

a.disabled
{
  color:#050;
}

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

上面的例子似乎不适用于 IE,但适用于 Firefox,在 IE 上,即使我在样式中设置颜色,它仍然是灰色的。如果我删除disabled="disabled",它会起作用。

【问题讨论】:

  • 链接失效是什么意思?
  • 禁用的链接是什么意思。你指的是输入按钮吗?
  • 他的意思是一个禁用类的链接
  • 你怎么知道?我还没有将其视为一种常见做法。标签也不指向任何特殊方向。
  • 不,我的意思是禁用的链接

标签: html css


【解决方案1】:

:disabled pseduo 类仅适用于输入字段,如文本、单选框、复选框等,并且在您为元素赋予属性 `disabled="disabled" 时应用。但是,IE6 不能识别伪类,因此您需要单独使用一个类才能使其工作。

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

可以设置样式

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

伪类将适用于现代浏览器,而该类将涵盖 IE6。

就像 Radeksonic 所说,如果你想让禁用的 CSS 出现在其他元素上,比如锚点,你只需要创建和使用一个类。 &lt;a&gt;s 没有 disabled 属性

【讨论】:

  • 这在 IE8 中对我不起作用。有什么想法吗?另外:2个选择器的语法是什么,例如。禁用并输入=“文本”。
【解决方案2】:

对于您在评论中提供的链接:

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

样式将是(就像任何其他基于属性的选择器一样):

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

如果我在你的位置,我会检查跨浏览器的行为,不过。之前没见过disabled这个属性。

【讨论】:

  • 需要注意的是属性选择器在 IE
  • 而且“禁用”仅适用于表单元素,不适用于锚点
【解决方案3】:

使用

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

只需使用一个点后跟一个类名来表示您要使用该类。

适用于所有浏览器

【讨论】:

  • 这只有在他的&lt;a&gt;标签被赋予一个名为“disabled”的类时才有效吗?
  • 是的,它正在寻找具有“已禁用”类的元素,并且会忽略其他任何内容。
  • 要将其应用于所有具有“已禁用”类的元素,请删除“a。”。
【解决方案4】:

当然,仅仅添加一个类来以特定方式设置&lt;a&gt; 元素的样式并不会阻止它们实际执行正常操作。为此,您将需要 javascript。以一种基本的方式,您可以:

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

【讨论】:

    【解决方案5】:

    您可以使用attribute selector 获得完整的浏览器支持。

    这就足够了:

    a[disabled] {
      display:none;
    }
    

    属性选择器

    [att]    
    

    当元素设置“att”属性时匹配,无论该属性的值如何。

    [att=val]
    

    当元素的“att”属性值正好是“val”时匹配。

    [att~=val]
    

    表示具有 att 属性的元素,其值为以空格分隔的单词列表,其中一个恰好是“val”。如果“val”包含空格,它永远不会代表任何东西(因为单词是用空格分隔的)。如果“val”是空字符串,它也永远不会代表任何东西。

    [att|=val]
    

    表示具有 att 属性的元素,其值要么正好是“val”,要么以“val”开头,紧跟“-”(U+002D)。这主要是为了允许语言子代码匹配(例如,HTML 中 a 元素上的 hreflang 属性),如 BCP 47 ([BCP47]) 或其后续版本中所述。对于 lang(或 xml:lang)语言子代码匹配,请参见 :lang 伪类。

    【讨论】:

    • @tommyalvarez 你尝试了什么?
    • 我使用了 ` a[disabled] { 指针事件:无;游标:不允许; ` } 当然,在 chrome Elements 检查器中,&lt;a&gt; 已禁用该属性。我必须使用“禁用”的类名而不是属性来做到这一点
    • @tommyalvarez 它在所有浏览器中都能正常工作。看这个测试jsfiddle.net/9gLu0c3r/2
    【解决方案6】:

    我的禁用链接

    a.disabled {
      display:none;
    }
    

    只有 5 个(我认为)pseudo-class selectors for links:链接、访问、悬停、活动和焦点。

    【讨论】:

      【解决方案7】:

      如果你使用 JQUERY,你可以添加属性到锚

      .attr("disabled","true")
      

      并删除它

      .removeAttr("disabled")
      

      【讨论】:

      • 我认为应该是$(element).attr("disabled","disabled") 而不是true
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-04-28
      • 2012-01-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-08
      相关资源
      最近更新 更多