Could it be possible to make css selector affect other elements in the page without javascript?

Question

For example, I want to make two textboxes have the same style when either is focused:

<div class="divTxt">
    <input type="text" id="a" class="a" />
    <input type="text" id="b" class="b" />
</div>

and the css would be:

.a:focus 
{
    background-color:Blue;
}
.b:focus 
{
    background-color:Yellow;
}

What I need is make a's background-color:Yellow when b is focused and vice versa. any possibilities? Thanks a lot.

Answer 1

You could try the General Sibling Selector(~) if the input boxes are next to each other.

Something like:

.a:focus {    background-color:Blue;}
.a:focus~.b {    background-color:Blue;}
.b:focus {    background-color:Yellow;}
.b:focus~.a {    background-color:Yellow;}

Note: Completely untested and a stab in the dark at best!

Answer 2

If they've got javascript disabled, they probably won't notice text box styles.

Answer 3

.chk1:focus{
   background-color:Blue;
}
.chk2:focus{
   background-color:Yellow;
}

text feilds

<input class=chk1 type=text id="a">
<input class=chk2 type=text id="b">

This one will work fine with FireFox but might have issues with IE6 See CSS Issue Focus For IE6

If you want this to work with IE, you might want to use javascript!!

Hope this helps

RDJ