Question

I am using ASP.NET MVC 3 and FluentValidation for validating my view models.

I currently have my text boxes styled like this:

input[type="text"]{border:1px solid #c9d7e1;padding-left:2px;}

and I have a validator css class for if there is an error with the input:

.input-validation-error{border:1px solid #ff0000;background-color:#ffeeee;}

When validation kicks in then the background colour of the textbox is #ffeeee which is correct, but it does not make the border of the textbox red (#ff0000). It is still #c9d7e1. How do I change my styles so that it makes the border of the textbox red?

I also have my textareas defined as:

textarea{border:1px solid #c9d7e1;padding-left:2px;}

and the border gets set to red.

Answer 1

Because input[type="text"] is more specific than .input-validation-error so it takes priority.

input[type="text"].input-validation-error{
    border:1px solid #ff0000;
    background-color:#ffeeee;
}

will do the job.