css on different input classes

Question

hello i have the following problem:

i do check my form for some php error messages.

in case of no error i simply have my css setting:

.wrapper #frame form fieldset ul input {
    color: #f23;
    font-size: 10px;
    height: 18px;
    padding-left: 5px;
    margin-top: 3px;
    outline:none;
}

and my focus settings:

.wrapper #frame form fieldset ul input:focus{
    color:#fff;
    font-weight: bold;
    border: 2px solid #fff;
}

okay, now i changed this line:

<input type="text" id="normal" name="1" value=""/>

with adding the class of error:

<input class="err" type="text" id="normal" name="1" value=""/>

the problem is that my settings just take place for my class details on the input fields but not on my focus settings:

.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
.err input:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

so if there is someone who could tell me why this does not work i really would appreciate. thanks a lot.

Answer 1

You have a class of error in your HTML, and in your CSS you've set the class to err; if you use the same name consistently (whichever you choose) it should work.

Your current HTML:

<input class="error" type="text" id="normal" name="1" value=""/>

...and CSS:

.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
.err input:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

Also, in your CSS you're selecting an input that's a descendant of an element with the err class-name, not an input element with that class-name. So, altogether you should use something like:

<input class="err" type="text" id="normal" name="1" value=""/>

input.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
input.err:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}