Pimpin' Validation Summary With CSS

Posted on July 29, 2007  |  

Posted in Design


Without any styling applied, ValidationSummary renders as a boring list with error messages. However, it’s easy to pretty it up with some CSS since it’s nothing more than a div with an unordered list inside.

I pretty much always put a validation summary in a master page and assign it a class:

<asp:ValidationSummary runat="server" 
    CssClass="errors" />

Next, I’ll put it in a box with a red border an a humorous picture, plenty of which you can find for $1 at Stockxpert.

.errors {
 border: 2px solid red;
 color: red;
 margin: 5px 0px;
 padding: 15px;
 background: #fff url(../images/sad_server.gif) no-repeat 5px 50%;

The background image will appear 5px from the left edge of the summary and will always be centered vertically (it’s the “50%” part up there).

I will also knock out padding and margins on the error list and move it to the right far enough to sit next to the picture of a “sad server”:

.errors ul {
 margin: 0;
 padding: 0;
 margin-left: 80px;
 list-style: square;

The end result looks as follows:

Validation summary styled with CSS

There are many other ways to skin a validation summary. For example, if your pages have a fixed-width layout, you can shoot for a background image or two with rounder corners. The sky is the limit, as they say.


on July 30, 2007

Nice :)

on July 30, 2007

Great idea, have copied that on my site!

on June 18, 2008

thx for this. However. How do you change the colour of the text its self. I cant figure it


on October 1, 2008

Matt: You can change the color with an ".errors li" selector.

London Freelancer
on November 29, 2009

Can we output this validation summary to a modal popup, instead of the dull alert box?

Milan Negovan
on November 29, 2009

I assume you mean a "modal" box built with JavaScript, right? You would need to hack Microsoft's validation scripts for that.