La classe CSS non sostituirà lo stile del bordo

Question

Ho designato tutti i miei campi di testo con un bordo grigio, e per i campi con class="form_field_error", voglio che il colore del bordo diventi rosso.

Ho provato il seguente codice, ma non riesco a convincere la mia classe a sovrascrivere il bordo precedentemente definito? Cosa mi manca?

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; 
} 

ho creato un jsFiddle per illustrare il problema.

Answer 1

Prova questa:

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

Answer 2

Avete provato a specificare quale div per applicare il bordo rosso a questo?

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

E su un lato nota - l'ID impostato come 'title' è che solo per questo uno o stai pensando di riutilizzare questo?

Perché si potrebbe anche fare ->

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

Answer 3

Il input[type="text"] css ha la precedenza sulla .form_field_error css.

Sostituirlo con input.form_field_error e il bordo funzionerà.