Css for different input classes

Question

Hi, I have the following problem:

I check my form for some php error messages.

if there is no error, I just use the 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; } 

OK, now I changed this line:

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

with the addition of an error class:

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

the problem is that my settings are only done for my class data in the input fields, but not in 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; } 

therefore, if there is someone who could tell me why this does not work, I would really appreciate it. Thank you very much.

Answer 1

There is an error class in your HTML, and you have defined the err class in your CSS; if you use the same name sequentially (depending on what 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; } 

In addition, in your CSS, you select input , which is a descendant of an element with an err name class, and not an input element with this class name. So, in general, 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; }