CSS class won't override border-style

css overriding border border-color
Andersson picture Andersson · Jun 25, 2013 · Viewed 19.3k times · Source

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.

Answer

Dmiller89 picture Dmiller89 · Jun 25, 2013

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.

Related questions

Override body style for content in an iframe

How can I control the background image and colour of a body element within an iframe? Note, the embedded body element has a class, and the iframe is of a page that is part of my site. The reason I …

Read More
How to override the properties of a CSS class using another CSS class

I am fairly new to CSS3 and I want to be able to do the following: When I add a class into a an element, it overrides the properties of another class used in this specific element. Let's say that …

Read More
Override and reset CSS style: auto or none don't work

I would like to override following CSS styling defined for all tables: table { font-size: 12px; width: 100%; min-width: 400px; display:inline-table; } I have specific table with class called 'other'. Finally table decoration should looks like: table.other { font-size: 12px; } so i …

Read More