ASP.NET Validator CSS quirks

I just came across another "fun" issue with the Microsoft validation controls within ASP.NET. Every validator provides a CssClass property so that the validators can be styled to suit the situation.

When a validator is rendered in HTML, it renders something like the following:

<span title="Required" class="requiredValidatorClass" id="ctl1" controltovalidate="userId_textbox" errormessage="Required" display="Dynamic" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">Required</span>

Notice that it renders the class attribute and applies the css class name I provided, BUT (and it's a big BUT), it also renders the style attribute for the tag as well. So, basically, if you wanted your text in your validation message to be a different color other than red you get unexpected results. The rest of your CSS would be fine, except for the color.

There is a way around this though. You have to use the "important" designation in your css to give weight to your CSS color attribute. Here's an example:

.requiredValidatorClass {FONT: bold 8pt Tahoma, Verdana, Arial, sans-serif; COLOR: #990000 ! important; }