Button disabled but looks active

Question

So I have a button that is currently set to disabled, and in IE it is greyed out, but in Firefox, Chrome and Safari, it is disabled but still looks active.

Button code

<tr valign="middle">
    <td colspan="2" style="width: 100%">
        <asp:Button ID="DownloadButton" runat="server" Text="Download" Width="85px" CssClass="ESTableHeaderL" OnClick="DownloadButton_Click" />
    </td>      
  </tr> 

And my code behind

protected void DownloadButton_Click(object sender, EventArgs e)
{        
    if (ddBusinessMonth.Items.Count == 0)
    {
        DownloadButton.Enabled = false;
        ShowClientMessageBox("No Data found for downloading");
    }
....

}

Is there anything I can do to make it look the same as in IE?

Thanks

Solution 1

The :disabled selector can be used with CSS3

input[type="button"]:disabled
{
background:#dddddd;
}

Browser Compatibility:

 IE8+ FF1.5+ SA3.1+ OP9.2+ CH2+

For ASP.NET:

Add a CssClass attribute to your server-side button and refer it to the class containing the above CSS.

Solution 2

you could programatically assign a css class if its disabled

if (ddBusinessMonth.Items.Count == 0)
    {
        DownloadButton.Enabled = false;
        DownloadButton.CssClass = "disabledbutton";
        ShowClientMessageBox("No Data found for downloading");
    }

css

.disabledbutton{
    background-color:#ddd;
}

Comments

[jrummell]

Might want to add input[type="submit"]:disabled as well.

[TheLifeOfSteve]

excuse my ignorance, but how do I apply a style to an object in asp.net

[Anirudh Ramanathan]

Add a CssClass attribute to your server-side button and refer it to the class containing the above CSS.

[Poonam Singhania]

Can I do at cliend side. I have lot of butttons inside table actually button are working as disabled but visually they are enabled ie 9 its disabled for disable and ie11 its enabled . I know the id for the button . Is there anyway out to do from css only don't want to use codebehind

[mklement0]

Great solution, but the choice of sample style is unfortunate, as (at least for me, on Google Chrome 49) it doesn't actually change the button appearance. I suggest using color: #ccc; which grays out the button's text.

[fish-404]

My web.config already has this configuration, but the disabled button still can't show obviously.