Изменение внешнего вида отключенной ссылки
Можно ли изменить внешний вид html-ссылки при отключении? Например, используя что-то вроде:
a.disabled
{
color:#050;
}
<a class="disabled" disabled="disabled" href="#">Testing</a>
Приведенный выше пример не работает с IE, но работает для Firefox, в IE он остается серым, даже когда я устанавливаю цвет в стиле. Если я удаляю disabled="disabled"
, то он работает.
Ответы
Ответ 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.
Как сказал Радексоник, если вы хотите, чтобы отключенный CSS отображался на других элементах, например якорях, вам просто нужно было создать и использовать класс. Нет атрибута disabled для <a>
s
Ответ 2
Для ссылки, подобной той, которую вы указали в комментарии:
<a href="#" disabled="disabled">some link</a>
Стиль будет (как и любой другой селектор, основанный на атрибуте):
a[disabled=disabled] {
color: red;
font-weight: bold;
}
Если бы я был на вашем месте, я бы проверял поведение в кросс-браузере. Я раньше не видел атрибут disabled
.
Ответ 3
Использование
a.disabled
{
color: #CCC;/* Just an example */
}
Просто используйте точку, за которой следует имя класса, чтобы указать, что вы хотите использовать этот класс.
Он работает во всех браузерах
Ответ 4
Конечно, просто добавление класса для стилей ваших элементов <a>
определенным образом не остановит их на самом деле, выполняя их нормальное действие. Для этого вам понадобится javascript. В основном вы могли бы:
<a href="foo.htm" class="disabled" onclick="return false;">linky</a>
Ответ 5
Вы можете использовать селектор атрибутов для полной поддержки браузера.
Этого будет достаточно:
a[disabled] {
display:none;
}
ВЫБОРЫ ATTRIBUTE
[att]
Сопоставьте, когда элемент устанавливает атрибут att, независимо от значения атрибута.
[att=val]
Сопоставьте, когда значение атрибута атрибута "att" будет точно "val" .
[att~=val]
Представляет элемент с атрибутом att, значение которого представляет собой список слов, разделенных пробелами, один из которых является точно "val" . Если "val" содержит пробел, он никогда не будет представлять ничего (поскольку слова разделены пробелами). Если "val" - это пустая строка, она никогда не представит ничего.
[att|=val]
Представляет элемент с атрибутом att, его значение либо является точно "val" , либо начинается с "val" , а затем "-" (U + 002D). Это в первую очередь предназначено, чтобы разрешить совпадение языкового подкода (например, атрибут hreflang для элемента a в HTML), как описано в BCP 47 ([BCP47]) или его преемника. Для сопоставления субкода языка lang (или xml: lang) см. Псевдоязык: lang.
Ответ 6
< a class= "disabled" > Моя отключенная ссылка </a>
a.disabled {
display:none;
}
Есть только 5 (я думаю) псевдосектор селекторов для ссылок: ссылка, посещение, зависание и активность, а также фокус.
Ответ 7
если вы используете JQUERY, вы можете добавить атрибут anchor
.attr("disabled","true")
и удалите его
.removeAttr("disabled")