How to Get the ASP.NET LinkButton CssClass Property to Work

Hopefully this will save someone a lot of time. Today I was working on a webpage in ASP.NET and made use of the LinkButton control. But when I applied a CSS class using the CssClass property, it just wouldn't take. After much searching, I found the solution.

First off, this is a bug -- you can't spin it any other way. Fortunately, there IS a way to get it to work: you need to specify one of the following qualifiers on your CSS class: visited, link, or active.

For example, when I tried to apply the following class, it wasn't reflected in the control:

.Pager
{
font-family:Verdana;
font-size:8pt;
font-weight:bold;
color:Orange;
}

However, when I added the link qualifier (":link" added to the class name), it worked like a charm:

.Pager:link
{
font-family:Verdana;
font-size:8pt;
font-weight:bold;
color:Orange;
}

When you apply the class name to the CssClass property of the control, leave out the qualifier. For example, using my class above, I set the value of the CssClass property like this:

linkbtn.CssClass = "Pager";

Notice that I used "Pager" and not "Pager:link".

To recap:
1. Apply one of the aforementioned qualifiers (link, active, or visited) to the end of your class name, preceeded by a colon (there may also be other qualifiers, but these are the three I know about).

2. Specify your class name without the qualifier as the value for the LinkButton's CssClass property.

I hope this helps!

Comments

Popular Posts

Resolving the "n timer(s) still in the queue" Error In Angular Unit Tests

How to Get Norton Security Suite Firewall to Allow Remote Desktop Connections in Windows

How to Determine if a Column Exists in a DataReader

Silent Renew and the "login_required" Error When Using oidc-client

Fixing the "Please add a @Pipe/@Directive/@Component annotation" Error In An Angular App After Upgrading to webpack 4