Getting undesirable styles

HTML & CSS
1

In style.css I have this defined:

input[type=text] {
    width: 250px;
    border: 1px dashed #ccc;
     padding: 5px;
}

In search_table.css, I have this defined:

.filter_input {
    width: 250px;
}

Now, I load style.css before search_table.css


    <link type="text/css" href="css/style.css" rel="stylesheet" />
    <link type="text/css" href="css/search_table.css" rel="stylesheet" />

but my filter_input STILL has the dashed border and 5px padding.

<input id="filter_input" type="text" />

What am I doing wrong?

2

I’d have to agree with Ryan, it is slightly dangerous altering the border definition for the INPUT to such an extent; it can cause usability issues or complicate user interaction, etc.

3

Hi,
You have it as a class in the CSS and as an ID in the html.

4

You should avoid removing the border on inputs because that can cause accessibility issues (people use that to see where it is along with other reasons :))

5

The first problem is that your HTML uses id=“filter_input”, but your CSS is set to match class=“filter_input”.

But even if you change that, it won’t make any difference. Styles are combined together. Unless one explicitly contradicts another (eg, one declaration tells an element to be red and another tells it to be blue), all relevant declarations are used to determine an element’s style.

Your <input id=“filter_input” type=“text”> element matches both of the style declarations, and they don’t contradict each other, so they are both applied. If you want to override the generic input[type=text] declaration on filter_input, you will need to undo the generic settings in the more specific declaration, eg

#filter_input {width:250px; border:0; padding:0;}