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

Question

Можно ли изменить внешний вид ссылки html, когда она отключена? Например, используя что-то вроде:

a.disabled
{
  color:#050;
}

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

Пример выше, похоже, не работает с IE, но работает для Firefox, в IE он остается серым, даже когда я устанавливаю цвет в стиле. Если я удаляю disabled="disabled", однако, это работает.

Answer 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 появлялся на других элементах, таких как якоря, вам просто нужно создать и использовать класс. Там нет отключенного атрибута для <a> s

Answer 2

Для ссылки, подобной той, которую вы указали в комментарии:

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

Стиль будет (как и любой другой селектор на основе атрибута):

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

Если бы я был на вашем месте, я бы проверил кросс-браузерное поведение. Я не видел атрибута disabled, использовавшегося ранее.

Answer 3

Используйте

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

Просто используйте точку, за которой следует имя класса, чтобы указать, что вы хотите использовать этот класс.

Работает во всех браузерах

Answer 4

Вы можете использовать селектор атрибутов для полной поддержки браузера.

Этого будет достаточно:

a[disabled] {
  display:none;
}

---

ВЫБОР АТРИБУТА

[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.

Answer 5

Конечно, простое добавление класса для стилизации элементов <a> определенным образом не помешает им фактически выполнять их обычное действие. Для этого вам понадобится JavaScript. Основным образом вы могли бы иметь:

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

Answer 6

если вы используете JQUERY, вы можете добавить атрибут в привязку

.attr("disabled","true")

и удалите его

.removeAttr("disabled")

Answer 7

Моя отключенная ссылка

a.disabled {
  display:none;
}

Существует только 5 (я думаю) селекторов псевдоклассов для ссылок : ссылка, посещение, наведение, активная и фокусировка.