Override default disables style.

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
LVL 3
Andy GreenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kelvin McDanielSr. DeveloperCommented:
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.
Andy GreenAuthor 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
Andy GreenAuthor Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Chris StanyonWebDevCommented:
To set the style for a disabled element, you usually use the disabled pseudo selector:

input:disabled { color: black; }
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.