2010-02-17 3 views
4

Можно ли переопределить стиль, применяемый к гиперссылке, если у него есть атрибут disabled="disabled"?Как переопределить стиль скрытых гиперссылок?

В настоящее время он неактивен. Не удосужился о том, чтобы его активную ссылку, просто хочу, чтобы изменить шрифт, цвет и т.д.

UPDATE: должны работать в IE6, IE7 & FF

UPDATE: Это хуже, чем я, хотя HTML-код является <A id="someId" disabled>About Your Group</A>

UPDATE: Я собираюсь действительно должны увидеть, что добавление этого «отключено» на связи .. Я думаю это jquery plugin .. (ui.tabs, jquery ui.tabs)

+0

использование!важно в вашем css – ant

+0

Что вы используете DOCTYPE? – roosteronacid

+0

Если вы не загружаете/генерируете HTML динамически, это не jQuery, который помещает отключенные свойства. – roosteronacid

ответ

7

Свойство disabled не может использоваться на a элементов. он применяется только к input, select и button элементам.

Sure; Internet Explorer создает эффект скоса для ссылок с этим набором свойств. FireFox, с другой стороны, полностью игнорирует это свойство.

Примечание: Ссылки по-прежнему будут функционировать. Их поведение по умолчанию НЕ предотвращается - они просто выглядят отключенными. Они не ведут себя как отключенный ввод текста.


Вы лучше использовать класс, чтобы сигнализировать, если связь отключена. Это также будет работать в кросс-браузере ...:

CSS-

.disabled { color: #ccc; } 

HTML-

<a href="..." class="disabled">...</a> 

И завершить отключенный эффект; с помощью JQuery, вы можете выбрать все ссылки с классом «отключено» и предотвратить их поведение по умолчанию, например, так:

$(function() 
{ 
    $("a.disabled").click(function() 
    { 
     // return false to disable the link (preventDefault = true) 
     return false; 
    }); 
}); 
+0

hmm interesting –

+0

Поведение точно так же, как описано. Вы просто вылечили мою головную боль. – Matijs

2

Я не знаю, в какой степени атрибут disabled поддерживается для гиперссылок. Убедитесь, что вы тщательно протестировали. Я вижу два способа ориентации это в CSS:

CSS 2,1

Вы можете попробовать CSS селектор атрибута 2,1

a[disabled=disabled] { color: blue } 

Я думаю, что это, скорее всего, работать с не- элемент формы. Не работает в IE < = 6. Quirksmode compatibility table.

CSS 3

В CSS 3, можно использовать :disabled псевдо-класс (source)

input:disabled { background-color: yellow; } 

не работает в любом IE, включая 8. Работает в Firefox, Chrome и Opera. Quirksmode compatibility table

Я никогда не видел disabled, который используется для нормальной гиперссылки, поэтому вам придется попробовать, работает ли это. Согласно спецификации, псевдокласс класса disabled предназначен для отключенных элементов формы.

+0

Они не работали, я боюсь, что [отключено] может настроить таргетинг, но не переопределять цвет текста. –

+0

@Lee Если он может нацелить его, я вполне уверен, что вы можете его переопределить. Это нормальная гиперссылка? Можете ли вы попробовать, важно? (Затем вы можете использовать Firebug, чтобы узнать, где находится оскорбительное определение.) –

+0

! Важным было первое, что я пробовал. –

0

Я не думаю, что есть «отключен» атрибут для гиперссылок (в любом случае это не уважать w3c recommandations), но вы можете попробовать добавить класс для укладки этих элементов, как:

<a class="inactive" ...>...</a> 

И для CSS:

a.inactive { 
    color:#000 
} 
3

Я заметил, что ASP.Net ставит отключен = «отключено» по <a> при настройке Enable на false на <asp:HyperLink>.

Это приводит к тому, что css-правила для этого элемента игнорируются в IE (даже для a[disabled="disabled]!), Что крайне раздражает. Другим браузерам все равно, поскольку они игнорируют это свойство.

Моим решением было просто установить свойство NavigationUrl на null в коде для элементов, которые я хотел отключить.

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

+0

Он тоже делает это для LinkButtons, и у них нет свойства NavigateUrl. Поэтому я пошел на [disabled = disabled] {color: Gray! Important; text-decoration: none! important; } в css. Вероятно, он не отвечает всем требованиям этого вопроса, но для меня это достаточно хорошо. – Colin

1

Вы используете ASP.NET, и вы отключите LinkButton на стороне сервера, созданный html - это тег <a> с нестандартным атрибутом disabled="disabled". Однако нет никакого атрибута href, так что ссылка не будет вести себя как ссылка в любом из браузеров.

Проблема заключается в том, что IE добавляет типичный «эффект скоса» к отключенной ссылке, а другие браузеры отображают его как «обычный текст».

Вы можете решить эту проблему в не-IE браузеры укладка, как это:

a:not([href]) /* this is for ASP.NET disabled links */ 
{ 
    opacity: .5; /* all but IE before 9 */ 
} 

Проблема заключается в том, что IE (по крайней мере, до IE 8) продолжает делать эффект «скос» на ссылку инвалидов. Для того, чтобы IE ведут себя, как и другие браузеры, которые необходимо изменить стиль CSS, добавив, этот нестандартный фильтр attirbute (работает только для IE):

filter: alpha(opacity=50);

И вы также должны использовать некоторые JavaScript, то есть JQuery , чтобы удалить атрибут offending disabled. То есть

$('#controlId').attr('disabled','')

Если ваш случай еще более странно, и у вас есть disabled и href, вы должны удалить также href так, что стиль может быть применен и ссылка не работает.

Смежные вопросы