css on different input classes
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;
}
bonny
Updated on July 09, 2022Comments
-
bonny almost 2 years
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.