ASP.Net Validator Default Style

Question

I'm using several variants of the Validator controls (RequiredFieldValidator, CompareValidator, etc) and am using the CssClass property of the validator. I can see (via Firebug) that the class is being applied, but the validator control itself is adding a style element to it, namely color: red. But I don't want that. I want the control to use the cssclass only.

I know I can override the Forecolor attribute, but I'll have to do that on every validator in the project. And I'd really like to be able to just change my CSS Class in my stylesheet in case we have to change all the error message appearances in the future.

Anyone have any clues how to tell the Validator controls to NOT use their default styles?

Keltex · Accepted Answer · 2008-10-29 16:21:40Z

13

You can do this in your css file:

.validator
{
    color: blue !important;
}

This will override the inline red style.

answered Oct 29, 2008 at 16:21

Keltex

26.5k12 gold badges82 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Dawdy Over a year ago

Excellent. That worked in IE6 and FF3. I can't test the others right offhand, but this will get me through for testing. I never thought to do the !important thing. For anyone who cares, the .validator class he is referring to above can be anything -- mine is called .error_text

Deniz Dogan Over a year ago

This is a nice example of ASP.NET sucking. Resorting to using !important just because ASP.NET pushes style="color: Red" onto you.

Chris W. Rea Over a year ago

FYI. As of ASP.NET 4.0: The BaseValidator class and validation controls that derive from it no longer render red text by default. (provided controlRenderingCompatibilityVersion is not set to "3.5")

Rich · Accepted Answer · 2013-01-11 11:22:59Z

You can change the default style of validators using Themes.

Right click on the website in Visual Studio
Choose "Add ASP.NET Folder"
Choose "Themes", name the new folder "DefaultTheme"
Create a file called "Controls.skin" in the DefaultTheme folder

Add the following to the Controls.skin file:

<asp:RequiredFieldValidator runat="server" CssClass="validation-error" />
<asp:RangeValidator runat="server" CssClass="validation-error" />
<asp:CompareValidator runat="server" CssClass="validation-error" />
<asp:RegularExpressionValidator runat="server" CssClass="validation-error" />
<asp:CustomValidator runat="server" CssClass="validation-error" />
<asp:ValidationSummary runat="server" CssClass="validation-error" />

Merge the following into your web.config:

<configuration>
    <system.web>
        <pages theme="DefaultTheme" />
    </system.web>
</configuration>

Then you can set whatever colour you want for .validation-error in your CSS files.

(Note that versions of ASP.Net before 4.0 used to apply style="Color:red" to all validators by default, making it hard to override their colours in CSS. If you find that is affecting you, then you can override it by setting the ForeColor property on each of the theme elements above, or add !important to your CSS rule.)

See:

How to: Define ASP.NET Page Themes
How to: Apply ASP.NET Themes
Validation Controls Lost Their Red Color in ASP.Net 4.0

John Dunagan · Accepted Answer · 2008-10-29 18:04:08Z

3

If you use themes, you can set up your skin file to control the appearance of your validator. The problem with Forecolor inline is that the way .Net renders the default controls, it inserts a color="#..." attribute that overrides CSS at the element level. If Keltex's solution above doesn't get it for you with the !important directive, your next step is probably to use/adapt/help work on the CSS-Friendly Control Adapters project at http://www.asp.net/CSSAdapters/.

Shameless plug: Brian DeMarzo is working on extending this project at Google Code.

edited Oct 29, 2008 at 18:04

answered Oct 29, 2008 at 16:38

John Dunagan

1,4653 gold badges18 silver badges30 bronze badges

4 Comments

CMPalmer Over a year ago

Good advice, but wrong link (as far as I could tell). Did you mean: codeplex.com/cssfriendly ?

John Dunagan Over a year ago

Thanks. Edited, as I was pointing to the original version after Microsoft open-sourced(!) it, but yours is good, too.

John Rudy Over a year ago

Using themes will work; I've done it multiple times to override .NET's defaults. (Red is often the right answer, but not always!)

Matt Dawdy Over a year ago

Thanks for the pointers, guys. I just might delve into those other methods.

Ken Ray · Accepted Answer · 2008-10-29 16:16:19Z

1

Have you looked at themes?

answered Oct 29, 2008 at 16:16

Ken Ray

2,5283 gold badges21 silver badges28 bronze badges

3 Comments

Matt Dawdy Over a year ago

Nope. Do you know that will work, or do you think it might be a good place to start?

Ken Ray Over a year ago

I think it might be one place to start. But the answer from Keltex looks simpler.

Matt Dawdy Over a year ago

Thanks Ken. Keltex's solution appears to work (at least on FF3 and IE6 in WinXP).

Remi Guan · Accepted Answer · 2016-06-16 00:25:32Z

0

Set Forecolor=""

And

CssClass="your-css-class"

edited Jun 16, 2016 at 0:25

Remi Guan

22.5k17 gold badges68 silver badges90 bronze badges

answered Jun 16, 2016 at 0:06

Eyad Eyadian

1011 silver badge3 bronze badges

Collectives™ on Stack Overflow

ASP.Net Validator Default Style

5 Answers 5

3 Comments

1 Comment

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related