CSS class will not override border style

Question

I created all text fields with a gray border, and for fields with class="form_field_error" I want the border color to change to red.

I tried the following code, but I can not get my class to override a previously defined border? What am I missing?

HTML:

 <input type="text" name="title" id="title" class="form_field_error"> 

CSS

 input[type="text"] { display: block; height: 15px; font-weight: normal; color: #777; padding: 3px; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .form_field_error { border: 1px solid #f00; } 

I created jsFiddle to illustrate the problem.

Answer 1

Try the following:

 .form_field_error { border: 1px solid #f00 !important; } 

Answer 2

input[type="text"] css takes precedence over .form_field_error css.

Change it to input.form_field_error and the border will work.

Answer 3

Have you tried to indicate which div to apply the red border to this?

  input.form_field_error { border: 1px solid red; } 

And on the side of the note - the identifier that you set as the "title" is that just for that, or are you thinking of reusing it?

Because you can also do →

 #title.form_field_error { border: 1px solid red; }