Klasa CSS nie zastąpi stylu granicznego

Question

Wszystkie moje pola tekstowe zostały oznaczone szarej ramce, a dla pól z class="form_field_error" chcę, aby kolor obramowania zmienił się na czerwony.

Próbowałem następujący kod, ale nie mogę dostać mojej klasy, aby zastąpić zdefiniowane wcześniej granicy? czego mi brakuje?

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

stworzyłem jsFiddle do zilustrowania problemu.

Answer 1

Spróbuj tego:

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

Answer 2

Czy próbowałeś określić, który element div ma zastosować czerwoną ramkę, aby to polubić?

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

A na marginesie - identyfikator ustawić jako „tytuł” ​​jest to, że tylko w tym jednym lub myślisz o ponownym że?

Ponieważ można również zrobić ->

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

Answer 3

input[type="text"] CSS ma pierwszeństwo przed .form_field_error css.

Zmień to na input.form_field_error, a ramka zadziała.