css on different input classes - html

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