Css – Style disabled ASP.NET Linkbutton with background image

asp.netcsslinkbutton

I am using a simple ASP.NET linkbutton control.

<asp:LinkButton ID="LinkButtonDelete" runat="server" CssClass="linkButtonDelete">Delete</asp:LinkButton>

I am styling this button with the following css definitions:

.linkButtonDelete:link
{
    background: transparent url(/../images/btnRegular.png) no-repeat scroll 0 0 !important;
}
.linkButtonDelete:hover
{
background: transparent url(/../images/btnHighlight.png) no-repeat scroll 0 0 !important;
}

And here is the problem: If I disable the linkbutton (LinkButtonDelete.Enabled = false;) and then hover over the linkbutton, the background image shows btnHighlight.png (instead of btnRegular.png). I tested this in IE9 and Chrome. Same effect.

Is there any chance I can apply a "disabled" style with CSS only (please no Javascript!)?

Thanks

Best Answer

I'm keeping my other answer because it would work as well, but if you want a purely CSS solution, look into Attribute Selectors which are supported starting with CSS 2.1. Assuming ASP.NET sets the disabled attribute, you could add something like so:

.linkButtonDelete[disabled="disabled"]:hover
{
background: something else;   
}
Related Topic