disabled element text color in IE?

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

disabled element text color in IE?

Pascal Heus
Anyone knows how to set the foreground text color of a disabled input
element in IE?
I've been looking around for a solutions to this since last week but
nothing out there.
Firefox supports the input:disabled selector in styles but this doesn't
work in IExplorer.
IE allows you to change the 'background-color' but not the 'color'...
I'm trying to use a xforms:input for both display and edit with the
readonly attribute set dynamically through a bind.  This would greatly
then reduce my xforms code since I won't have to code both an
xforms:output and xforms:input in the same page.
many thanks
*P



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
Reply | Threaded
Open this post in threaded view
|

Re: disabled element text color in IE?

Erik Bruchez
Administrator
Excellent question, I hit this exact same issue recently as well. Even
labels associated with disabled form elements will be in gray.

For xforms:input and xforms:textarea, you can make your task easier by
translating into xforms:output with an XSLT stylesheet, but
unfortunately xforms:select and xforms:select1 in particular are harder
to convert this way through XSLT.

Definitely let us know if you find a solution to the styling issue with
IE 6.

-Erik

Pascal Heus wrote:

> Anyone knows how to set the foreground text color of a disabled input
> element in IE?
> I've been looking around for a solutions to this since last week but
> nothing out there.
> Firefox supports the input:disabled selector in styles but this doesn't
> work in IExplorer.
> IE allows you to change the 'background-color' but not the 'color'...
> I'm trying to use a xforms:input for both display and edit with the
> readonly attribute set dynamically through a bind.  This would greatly
> then reduce my xforms code since I won't have to code both an
> xforms:output and xforms:input in the same page.
> many thanks
> *P
--
Orbeon - XForms Everywhere:
http://www.orbeon.com/blog/



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
Reply | Threaded
Open this post in threaded view
|

Re: disabled element text color in IE?

Adrian Baker-2
In reply to this post by Pascal Heus
I had this exact same problem, and found no way to change the text color for disabled inputs in IE6. Similarly, disabled dropdowns & radio buttons are also too hard to read.

In the end to avoid manually producing input/output pairs everywhere I wrote a XSLT which generated a 'readonly' version of the form in a separate display-only xforms:group, with a xforms:output for every xforms:input, connected to the same bind/ref. Making the outputs display the labels instead of the value for xforms:select/select1 was a little tricky, but it's meant the individual forms are kept fairly simple.

Adrian

Pascal Heus wrote:
Anyone knows how to set the foreground text color of a disabled input
element in IE?
I've been looking around for a solutions to this since last week but
nothing out there.
Firefox supports the input:disabled selector in styles but this doesn't
work in IExplorer.
IE allows you to change the 'background-color' but not the 'color'...
I'm trying to use a xforms:input for both display and edit with the
readonly attribute set dynamically through a bind.  This would greatly
then reduce my xforms code since I won't have to code both an
xforms:output and xforms:input in the same page.
many thanks
*P

  

-- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: [hidden email] For general help: [hidden email] ObjectWeb mailing lists service home page: http://www.objectweb.org/wws



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
Reply | Threaded
Open this post in threaded view
|

Re: disabled element text color in IE?

Pascal Heus
Well, here is an partial approach for this problem.  This uses the IE image transformation filters to manipulate the control rendering.
It's far from perfect but is something to start with.
What the IE specific style below does is that:
- it makes the "GrayText" system color used for the disabled text transparent (1st chroma statement)
- It makes the border color transparent (2nd chroma statement) (this is optional)
- It then assigns a color to the transparent color and clears everything else
- The <!--[id IE]  and <![endif]--> statements are there as a little hack to make this look like a comment to all non-IE browsers (courtesy of http://www.quirksmode.org/css/condcom.html)

Note that colors in IE Dynamic filters have an extra FF in front to specify the opacity (could be useful).

<!-- this sets the style for for good browsers like Firefox -->
<style type="text/css">
    input {
        background-color:#ffff80;
        border: solid 1px black;
    }
    input:disabled {
        background-color:#ffffff;
        color: #0000ff;
    }
</style>
<!--[if IE]> This sets the style for $#%@! IE
<style type="text/css">
input {
    color: expression(this.disabled ? '#0000ff' : '#000000');
    border: solid 1px black;
    filter: expression(this.disabled ? 'progid:DXImageTransform.Microsoft.chroma(color=#ffACA899)'+
                                       'progid:DXImageTransform.Microsoft.chroma(color=#ff000000)'+
                                       'progid:DXImageTransform.Microsoft.MaskFilter(color='+this.style.color.replace('#','#ff')+')'                                     
                                     : '');
}
</style>
<![endif]-->


The few drawbacks of this approach are that:
- #ffACA899 is the value for the "GrayText" constant on my system and I assume this is a default for everyone (let me know...). This however can be changed by users in the control panel and I didn't find yet a way to access this value in javascript. It should be possible through vbscirpt thought.
- The disabled input can only have a single color and no background. The 'transparent' colors are changed to whatever color is specifed in the MaskFiler filter statement
- It's just plain ugly...

Anyway, I'm not sure this is really a viable approach but could be useful in some case. It probably can be improved, any idea/comment/suggestion would be welcomed.
Test file is attached.

Info on the filtering system in IE is available at:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters_transitions_entry.asp?frame=true

cheers,
*P

Adrian Baker wrote:
I had this exact same problem, and found no way to change the text color for disabled inputs in IE6. Similarly, disabled dropdowns & radio buttons are also too hard to read.

In the end to avoid manually producing input/output pairs everywhere I wrote a XSLT which generated a 'readonly' version of the form in a separate display-only xforms:group, with a xforms:output for every xforms:input, connected to the same bind/ref. Making the outputs display the labels instead of the value for xforms:select/select1 was a little tricky, but it's meant the individual forms are kept fairly simple.

Adrian

Pascal Heus wrote:
Anyone knows how to set the foreground text color of a disabled input
element in IE?
I've been looking around for a solutions to this since last week but
nothing out there.
Firefox supports the input:disabled selector in styles but this doesn't
work in IExplorer.
IE allows you to change the 'background-color' but not the 'color'...
I'm trying to use a xforms:input for both display and edit with the
readonly attribute set dynamically through a bind.  This would greatly
then reduce my xforms code since I won't have to code both an
xforms:output and xforms:input in the same page.
many thanks
*P

  

-- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: [hidden email] For general help: [hidden email] ObjectWeb mailing lists service home page: http://www.objectweb.org/wws


-- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: [hidden email] For general help: [hidden email] ObjectWeb mailing lists service home page: http://www.objectweb.org/wws


Test disabled input control


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws