Изменение внешнего вида отключенной ссылки

Можно ли изменить внешний вид 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")