Disabled Fields - opacity in CSS?

[leester]

I've got a form where I want some fields disabled, but just as easy to read (contrast) as the editable ones.

The custom CSS for this is working... all except for any consistency in 'removing' the opacity(?) set somewhere upstream. It's slightly easier to read in Chrome - plain ugly in IE, and the only thing I can guess is it has to do with the different handling or ignoring of opacity/alpha in child elements.

.form-field-disabled {
    cursor: default;
    background-image: none;
    background-color: #ffffc6;
    color: black;
    opacity: 1;
}

This actually works (but shouldn't?) in FF 3.6.8.

I've tried these settings with no luck either.

    -ms-filter: "alpha(opacity=100)"; /* IE8 */
    filter: alpha(opacity = 100); /* IE6/IE7

From all I've read so far, you can't 'remove' opacity settings from child elements.

I don't want to modify any of the EXT CSS files, but can't get this working consistently across IE/FF/Chrome.

Any suggestions?

Thanks,
Lee

[leester]

quick PS...

{
							readOnly : true,
							disabled: true,
							disabledClass: 'form-field-disabled',
							fieldLabel : 'Name',
							name : 'name',
							anchor : '95%'
						}

that's an excerpt from the form.

readOnly: true looks/works fine... except the background color should be different for the user. Now wondering if readOnlyClass exists...

[edit...] nope. At least not by that name.

Perhaps a custom css for readOnly would work better in this particular case, since it still allows the user to select / copy info from the field but not change it.

EITHER one would suffice.

Off to investigate s'more.

Thanks again.
lee

[cshamis]

I'm interested in how this is going to shake out for you.

I hope to do the same thing for my app once I get core functionality finished. (If ever the PTB would stop feature creep!)

[leester]

Still digging, and I can find no reference to any opacity settings via firebug or the Chrome util.

I updated the css, have removed the 'opacity' setting and still get black or #0000000 in FF, but lighter 'black' in Chrome, and barely visible light grey in IE.

On screen, it LOOKS like there's a transparent mask in front of the textfield, but I've not yet figured out how/what/where to re-style or remove this box without modifying the extJS code.

Still on the hunt, but if anybody has been down this road before I'd appreciate any insight.

Lee

[leester]

Okay, I found a way to make it work (mostly) the way I want it. I'm still very curious about where the 'transparent' or semi-opaque mask comes from when a field is set to disabled, AND whether the mask should somehow be removed, or if it's part of another element.

Personally, I'm going to re-style the readOnly fields (or only the editable... undecided) so the user has feedback on which ones they can change.

In the meantime, I put together a quickie screenshot from all three browsers. IE's handling of opacity really kinda blows, and I think it's even worse with clearType turned on. Anyhoo - the screenshots show an obvious 'mask' over top of the text and the background, and it also shows FF either ignoring the mask, or properly following the extJS rules for using 'disabledClass' in the config.

oops... had to resize, but it still makes sense.
extjs_opacity.gif