Question

If user didn’t enter the fields properly, it will show the error message with class="ErrorInput" and class="TextError".

I am having a problem with ErrorInput class, when it has been defined in the html tag – it will not override the default input class.

HTML:

<li>
  <label>First Name</label>
   <input type="text" value="" class="ErrorInput" name="firstname">
   <div class="TextError">Please enter First Name</div>  
</li>
<li>
   <label>Second Name</label>
   <input type="text" value="Gates" name="secondname">
</li>

CSS:

.FormStyle .ErrorInput {
    border: #AD2930;
}

.FormStyle input[type=text], .FormStyle textarea {
    padding: 3px;
    display: inline-block;
    width: 290px;
    border: 1px solid #BDC7D8;
    margin: 0;
    font-size: 12px;
}

Answer 1

You are defining border-colour for the input in both .FormStyle .ErrorInput and .FormStyle input[type=text]

As .FormStyle input[type=text] is more specific than .FormStyle .ErrorInput, the #BDC7D8 colour is applied.

You will need to make the first CSS selector more specific for it to override the second colour:

.FormStyle input[type=text].ErrorInput {
    border-color: #AD2930;
}

Learn more about specificity here: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/