Html 更改禁用链接的外观
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1160376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the appearance of a disabled link
提问by Mercurious
Is it possible to change the appearance of an html link when it's disabled? For example using something like:
html 链接禁用时是否可以更改它的外观?例如使用类似的东西:
a.disabled
{
color:#050;
}
<a class="disabled" disabled="disabled" href="#">Testing</a>
The example above does not seem to work with IE but works for Firefox, on IE it remains gray even when I set the colour in the style. If I remove the disabled="disabled"
however it works.
上面的例子似乎不适用于 IE,但适用于 Firefox,在 IE 上,即使我在样式中设置颜色,它仍然是灰色的。如果我删除disabled="disabled"
它,但是它可以工作。
回答by Andrew
The :disabled
pseduo class only works with input fields, like text, radio, checkbox, etc. and applies when you give the element the attribute `disabled="disabled". IE6, however, doesn't recognize the pseudo class, so you'll need to use a class separately to make it work.
该:disabled
pseduo类只用输入字段的作品,如文本,单选,多选等,当你给元素属性`禁用=“禁用”适用。但是,IE6 无法识别伪类,因此您需要单独使用一个类才能使其工作。
<input type="text" value="You can't type here" disabled="disabled" class="disabled" />
can be styled with
可以用
input[disabled="disabled"], input.disabled {
/* whatever you want */
}
The pseudo class will apply to modern browsers while the class will cover IE6.
伪类将适用于现代浏览器,而该类将涵盖 IE6。
Like Radeksonic said, if you want the disabled CSS to appear on other elements, like anchors, you'll just need to make and use a class. There's no disabled attribute for <a>
s
就像 Radeksonic 所说的那样,如果您希望禁用的 CSS 出现在其他元素上,例如锚点,您只需要创建和使用一个类。有没有为残疾人属性<a>
小号
回答by Sinan Taifour
For a link like the one you provided in the comment:
对于您在评论中提供的链接:
<a href="#" disabled="disabled">some link</a>
The style would be (just like any other selector based on an attribute):
样式将是(就像任何其他基于属性的选择器一样):
a[disabled=disabled] {
color: red;
font-weight: bold;
}
If I was in your place, I'd check for cross-browser behavior, though. I haven't seen the disabled
attribute used before.
不过,如果我在你的位置上,我会检查跨浏览器的行为。我之前没有看到disabled
使用过的属性。
回答by Sinan Taifour
Use
用
a.disabled
{
color: #CCC;/* Just an example */
}
Just use a dot followed by a class name to indicate that you want to use that class.
只需使用一个点后跟一个类名来表明您要使用该类。
It works in all browsers
它适用于所有浏览器
回答by Matt Sach
Of course, just adding a class to style your <a>
elements in a particular way isn't going to stop them actually performing their normal action. For that, you'll need javascript. In a basic fashion, you could have:
当然,只是添加一个类来<a>
以特定方式设置元素的样式并不会阻止它们实际执行其正常操作。为此,您将需要 javascript。以基本方式,您可以拥有:
<a href="foo.htm" class="disabled" onclick="return false;">linky</a>
回答by DreamTeK
You could use the attribute selectorfor full browser support.
您可以使用 属性选择器来获得完整的浏览器支持。
This will be sufficient:
这将足够:
a[disabled] {
display:none;
}
ATTRIBUTE SELECTORS
属性选择器
[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
当元素设置“att”属性时匹配,无论该属性的值如何。
[att=val]
Match when the element's "att" attribute value is exactly "val".
当元素的“att”属性值正好是“val”时匹配。
[att~=val]
Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val". If "val" contains white space, it will never represent anything (since the words are separated by spaces). If "val" is the empty string, it will never represent anything either.
表示具有 att 属性的元素,其值为以空格分隔的单词列表,其中一个正好是“val”。如果“val”包含空格,它将永远不会代表任何内容(因为单词由空格分隔)。如果“val”是空字符串,它也永远不会代表任何东西。
[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.
表示具有 att 属性的元素,其值要么正好是“val”,要么以“val”开头,后跟“-”(U+002D)。这主要是为了允许语言子代码匹配(例如,HTML 中 a 元素上的 hreflang 属性),如 BCP 47([BCP47])或其后续版本中所述。对于 lang(或 xml:lang)语言子代码匹配,请参见 :lang 伪类。
回答by mveerman
<a class="disabled">My disabled link</a>
<a class="disabled">我禁用的链接</a>
a.disabled {
display:none;
}
There are only 5 (I think) pseudo-class selectors for links: link, visited, hover, and active, and focus.
回答by tmz
if you use JQUERY you can add attribute to anchor
如果您使用 JQUERY,您可以将属性添加到锚点
.attr("disabled","true")
and remove it
并删除它
.removeAttr("disabled")