RequiredFieldValidator - how to get rid of the default red font color

Question

I can't seems to change the default color of the required field validator. In the source it is:

<span class="required">*</span>
<asp:RequiredFieldValidator ID="valReq_txtTracks" runat="server"
    ControlToValidate="txtTracks"
    Display="Dynamic" />

Here's what I have in my .skin file:

<asp:RequiredFieldValidator runat="server" 
    CssClass="error-text"
    ErrorMessage="required" />

In the rendered source I see:

<span class="required">*</span>
<span id="ctl00_ctl00_cphContent_cphContent_valReq_txtTracks" class="error-text" style="color:Red;display:none;">required</span>

Notice the "style=color:Red;". That needs to go. I can't override it with a css-class because it's inline CSS. What should I do?

Answer 1

There is a RequiredFieldValidator.ForeColor property you can set to control the color. Note that if you want to set the color in CSS, then you need to set ForeColor="" to clear it on the control.

Answer 2

I know this an old thread, but I ran into this another day. It's kind of odd that setting style sheet does not override the text color of the validator. In my case, I had a whole bunch of different validators and extended validators that I wanted to override text color for, so instead of a theme and skin file, I created custom control adapter that handles rendering of BaseValidator control. Inside the rendering method, I just set ForeColor = Color.Empty. Hopefully this helps other people who ran into this situation and want to override text color for all kind of validators (required field, regular expression, compare,...).

Answer 3

Did you try to add style attribute with empty string in the skin file:

<asp:RequiredFieldValidator runat="server" 
    CssClass="error-text"
    style=""
    ErrorMessage="required" />

Answer 4

I read somewhere to use the !important tag in your css class to override the inline css...

Answer 5

Using !important seems to work fine in Firefox and IE, but for some reason not in Google Chrome... no biggie though, Chrome's share is still very low.

.form_error
{
    font: bold 15px arial black,arial,verdana,helvetica !important; 
    color: #ff0000 !important;
}