html5 / css3 :disabled pseudo class - working? how to display? what effects does it have?

css3 pseudo class :disabled

• is this supported yet - thought it was but cannot make it fly in chrome
  • tried setting div.disabled = true;
  • tried setting div.endabled = false;
  still no joy
• if wish to show an entire DIV disabled, how can I darken "gray out" the entire DIV without knowing its background colors?
• if the DIV is disabled, are INPUT's and A(nchor)s contained therein disabled as well?

my solution: cover the area of the page to开发者_如何学Python be disabled with a translucent page with a higher z-index - this prevents any interaction with the page below.

1. I'm pretty sure you can't add a disabled attribute to a <div> tag, only <input />, <fieldset> and <command> tags. Maybe try adding a <fieldset disabled> around your <input /> elements instead?

2. Use rgba colours or opacity to give your disabled element(s) a faded out look, or hsl colours and reduce the saturation to give the disabled element(s) a black-and-white look

3. If you use <fieldset disabled> I think it will disable all <input /> elements contained within it.

Best answer to your question is in the definition of what a disabled element is.

http://www.w3.org/TR/2000/WD-css3-userint-20000216#pseudo-disabled

2.1.3 The :disabled pseudo-class

Similar to :enabled, :disabled allows the author to specify precisely how a disabled or inactive user interface element should look.

It should be noted that most elements will be neither enabled nor disabled. An element is enabled if the user can either activate it or transfer the focus to it. An element is disabled if it could be enabled, but the user cannot presently activate it or transfer focus to it.

:disabled is supported in Chrome - check jsfiddle sample: http://jsfiddle.net/easwee/zCVGV/3/

Quirksmode includes the :disabled selector in its table of compatibility.

According to that table, the style is widely supported in all browsers, except IE, where it only got added recently with IE9.

However, you can use the attr selector to do the same thing:

.myclass[disabled] { .... }

is (virtually) the same as

.myclass:disabled { .... }

with the benefit that it works in IE7 and IE8.