Is it possible to override the styling that is applied to a hyperlink if it has the disabled="disabled" attribute?
It's currently greyed out. Not bothered about making it an active link, just want to change the font, color, etc.
UPDATE : Must work in IE6, IE7 & FF
UPDATE :
It's worse than I though the html is <A id="someId" disabled>About Your Group</A>
UPDATE :
I'm going to really have to see what is adding this 'disabled' to the links.. I think it's a jquery plugin.. (ui.tabs, jquery ui.tabs)
The disabled property can't be used on a elements. it only applies to input, select and button elements.
Sure; Internet Explorer puts a bevel-effect on links with this property set. FireFox, on the other hand, ignores this property completely.
Note: Links will still function. Their default behavior is NOT prevented--they just look disabled. They do not behave like a disabled text input.
You are better off using a class to signal if a link is disabled. This will work cross-browser as well...:
The CSS
.disabled { color: #ccc; }
The HTML
...
And to complete the disabled effect; using jQuery, you can select all links with the class "disabled" and prevent their default behavior, like so:
$(function ()
{
$("a.disabled").click(function ()
{
// return false to disable the link (preventDefault = true)
return false;
});
});
I've noticed that ASP.Net puts disabled="disabled" on <a> tags when setting the Enable property to false on an <asp:HyperLink>.
This causes css-rules for that element to be ignored in IE (even for a[disabled="disabled]!), which is extremely annoying. Other browsers don't care, since they ignore that property.
My solution was to simply set the NavigationUrl property to null in the code-behind for the elements I wanted to disable.
The advantage of doing this server side instead of with JavaScript is that it will work even if users have JavaScript turned off.
I don't know to what extent the disabled attribute is supported for hyperlinks. Make sure you test thoroughly.
I see two ways of targeting this in CSS:
CSS 2.1
You can try the CSS 2.1 attribute selector
a[disabled=disabled] { color: blue }
I think this is most likely to work with a non-form element. Doesn't work in IE <= 6. Quirksmode compatibility table.
CSS 3
In CSS 3, it's possible to use the :disabled pseudo-class (source)
input:disabled { background-color: yellow; }
doesn't work in any IE including 8. Works in Firefox, Chrome and Opera. Quirksmode compatibility table
I've never seen disabled used on a normal hyperlink so you will have to try whether that works. Per the specification, the disabled pseudo-class is for disabled form elements only.
Whe you're using ASP.NET, and you disable a LinkButton on server side, the html generated is an <a> tag with disabled="disabled" non-standard attribute. However, there's no href attribute generated, so that the link will not behave like a link in any of the browsers.
The problem is that IE adds the typical "bevel effect" to the disabled link, and the other browsers render it as "regular text".
You can solve the problem in non-IE browsers styling like this:
a:not([href]) /* this is for ASP.NET disabled links */
{
opacity: .5; /* all but IE before 9 */
}
The problem is that IE (at least up to IE 8) keeps doing the "bevel" effect on the disabled link. To make IE behave like the other browsers you need to change the CSS style, adding this non-standard filter attirbute (only works for IE):
filter: alpha(opacity=50);
And you also need to use some javascript, i.e. jQuery, to remove the offending disabled attribute. I.e.
$('#controlId').attr('disabled','')
If your case is even more strange, and you have disabled and href, you should remove also the href so that the style can be applied and the link doesn't work.
I don't think there is a 'disabled' attribute for hyperlink (anyway it doesn't respect w3c recommandations) but you can try to add class for styling these elements like :
<a class="inactive" ...>...</a>
And for the css :
a.inactive {
color:#000
}
Related
How can I remove the small square arround the radio button that gets displayed when the input gets focused?
I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.
I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.
Update:
Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:
Just in case someone comes to the same problem.
Update with Chrome / Safari, appearance removes the input
-webkit-appearance: none; would make the radio buttons disappear in
Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)
– noted by JFK 6
Try this CSS since it is an outline:
input[type="radio"]:focus {
outline:none;
}
Try outline:0 property for the radio button on focus
input[type="radio"]:focus{
outline:0;
}
You need to set:
outline:none;
On the :focus state of the CSS class relating to the checkbox, or directly e.g.
input[type="radio"]:focus{
outline:none;
}
The crucial part is setting outline
The CSS outline property is a shorthand property for setting one or
more of the individual outline properties outline-style, outline-width
and outline-color in a single rule. In most cases the use of this
shortcut is preferable and more convenient.
However, also setting appearance may help cross platform where different browsers render checkbox elements differently.
As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.
The -moz-appearance CSS property is used in Gecko (Firefox) to display
an element using a platform-native styling based on the operating
system's theme.
This property is frequently used in XUL stylesheets to design custom
widgets with platform-appropriate styling. It is also used in the XBL
implementations of the widgets that ship with the Mozilla platform.
As simple as
input[type="radio"] {
outline: 0 none;
}
JSFIDDLE
I have 2 display rules that i can't get to work
I can't use the display property with IE version < 10, i'm using this code:
Comments(<fb:comments-count href="http://mypage"/></fb:comments-count>)
That results in:
Comments(<fb:comments-count href="http://mypage" fb-xfbml-state="rendered" class=" fb_comments_count_zero">
<span class="fb_comments_count">
10
</span>
</fb:comments-count>)
With this css:
.fb_comments_count {
display: inline;
}
.fb_comments_count_zero {
display: inline;
}
It displays:
Comments(
10
)
instead of
Comments(10)
I tried also changing
display:inline
to
display:inline-block
But it's not working.
The other issue i'm having is when i use display:none. In fact, IE<10 doesn't hide what i'm styling, but IE10, chrome, opera and firefox don't have that problem.
How can i fix this?
P.S. I prefer not to use JavaScript, because i want my site to look good even if javascript is disabled.
You're using dashes instead of underscores in your CSS.
.fb-comments-count {
display: inline;
}
Try changing it to:
.fb_comments_count {
display: inline;
}
Internet Explorer will not style any element it is not aware of. That is why there is a HTML5 shim javascript; to inform IE of the new HTML5 elements (insert them into the DOM). Other browsers won't have this issue.
Im not entirely sure how FBML gets rendered in the end, but older IEs don't recognize custom tags and won't apply css to them, so this might be the issue. You need to "register" the tags to the IE.
Also you should avoid the linebreaks in your span:
<span class="fb_comments_count">10</span>
this already might fix your first problem, if not try to apply white-space:nowrap;.
ie has always had a problem with braking lines where it should not try adding this to your css
white-space:nowrap;
If that does not work then please tell me what happens.
I have had these problems before with ie so it not just you.
also try wrapping your fb tag in a p tag then add a style of choice to the p tag.
In all major browsers except IE9, it colors a disabled option's text to red this code:
<option disabled='disabled' class='red' value=''>No Students available to take up Assessment</option>
...
//CSS
.red{
color:red;
}
But in IE, it does not changed text color, it keeps it a grey disabled color. How can I get the disabled color to change in IE9?
perhaps use the attribute selector in CSS?
option:disabled,
option[disabled] {
color: red;
}
Something like this?
select :disabled.red {
color: red;
}
Here's a document about the :disabled pseudo-class from Microsoft.
Here's a fiddle that should work in IE9 and up.
Update: This seems to work only in IE>8. This answer points out the workaround of using the readonly attribute on form elements. That's not an option for the option tag though.
There are JavaScript workaround for old IEs around. A simple Google search led me to this site which provides a jQuery solution.
From the blog:
By adding a little css styling magic and you end up with an identical
outcome in all other modern browsers.
You can then enable and disable using javascript. Many people have
written code which makes an option look like it’s disabled, waits for
a click on the option element and then bluring it or focusing the next
/ previously selected option to make it act like it’s disabled.
I have come up with functions used with jQuery to disable / enable a
select option by converting it to an optgroup and back. It is tested
in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9
(although the opgroups jump to the bottom)
i have a problem styling html <select> element.
After work around, i found the problem that firefox always overrride css with forms.css in every page load.
my question is how to override firefox default css in my page ?
forms.css, I am assuming this is your style sheet.
I am also guessing that this has some very specific styles that are more specific than select{}
Use firebug to determine what styles are being applied and where they are coming from, will at least show you if your style is being overridden.
Try defining a pseudo class for the element like
select.my_select1 { font-size: 8px; }
Then apply the pseudo class the element with
<select class="my_select1">
Looking at a web app that I'm building now that displays perfectly in all current major browsers, I have assigned pseudo classes to each of these form elements and have no problem.
I hope this helps you
I recently had a similar problem. I made a custom style select but the option:checked was getting a style from the Firefox forms.css that I could not override.
My co-workers found two solutions:
-webkit-text-fill-color: myColor; // on the select
select:focus:-moz-focusring {color: myColor;} // on the select
In my CSS file, I have defined a class as given below.
input.entryFormInputBoxColor:focus
{
background-color:cyan;
}
When I use Firefox (3.5.5), the Input Box background color changes to cyan when there is focus, but it is not changing in IE (6.0). The class is successfully executing in Firefox, and all other classes defined, work well in IE too, but the above given class fails in IE.
Internet Explorer did not support the :focus pseudo-class until IE8, and only then when a !DOCTYPE is declared.
Here is a nice overview of CSS compliance from IE6 to IE8:
http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
You can overcome this pretty easily with javascript, for example: jQuery's focus() and blur() events.