CSS class won't override border-style

Question

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

I have tried the following code, but I can't get my class to override the 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 a jsFiddle to illustrate the problem.

Solution 1

Try this:

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

Solution 2

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

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

Solution 3

I would recommend using:

input[type="text"].form_field_error {
    border: 1px solid red;
}

The "!important" rule should only be used as a last resort - nuclear option - because it will surpass all other attempts to target an element based on precise and relevant specificity, reducing the control you have and creating potential roadblocks for future developers. Therefore the proper way, and the best way to handle it is to start with the same selector as the original one you are trying to override, then simply add the one thing that distinguishes it from the original. This way the specificity will be precisely what you want.