Override default disables style.

Andy Green
Andy Green used Ask the Experts™
on
I have an online form, that once filled out and saved can be opened, for viewing. The problem is I'm using .Enabled=false on the radio buttons/ dropdowns and textboxes. This renders the content too light to be read.

I've had a google, and found some solutions but nothing works, ie I can over ride the disabled style.

for example this is ignored, even though I can see the style is being applied its not working:

      <style type="text/css">
            input {color: black; -webkit-text-fill-color: black;}
      </style>

Anyone have any ideas.

This is in chrome, but must work in Chrome & IE 10 up.

Andy
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Unfortunately, you can't modify that particular behavior consistently. The alternative is basically to show the value as text and either hide or remove the element altogether. If you still need to be able to submit the value then also add a hidden field that has the same name and value as your now removed/hidden radio button.

Author

Commented:
Thanks, what I'm trying to do now is remove the .enabled=false so the controls are again editable, but using a modal overlay, to stop users from accessing the controls.

I'm hoping I can set the transparency to make the values more visible.

Has anyone done this?

Andy
Using a div with low transparency worked well. here is my solution.

CSS class:
.overlay {
    background-color: #ccc;
    height: 100%;
    position: absolute;
    width: 100%;
    opacity: .01;
    z-index: 999;
}

In the mark up I have a server panel control that renders as a div
<asp:Panel ID="pnlOverlay" runat="server" CssClass="overlay" Visible="false"></asp:Panel>

To disable the form I use this in the code behind

 pnlOverlay.Visible = "true"

Andy
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
To set the style for a disabled element, you usually use the disabled pseudo selector:

input:disabled { color: black; }

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial