Question

I am trying to fix a design issue related to ASP.NET MVC 3 validation and its css. I understand that the MVC has some default css classes for validation messages to use and if you need to customize the style you could simply update these classes per your requirement.

Now the problem here appears to be my requirement, our design team has come up with this validation messages display where if a required field is missing then the error message should have an “arrow image” that will point towards the input control. Below is the lay out that i am trying to achieve here:

Now the thing that I am trying to figure out is how could i align the background color of red and the image next to the message.

Any suggestions/help will be deeply appreciated.

Answer 1

you can use this html structure for displaying the error msg

<div class="error">
  <span>error message</span>
</div>

css

.error{background:url(arrow.gif) no-repeat left center; padding-left:15px;}
.error span{ padding:2px; background:red;}