focusing on an element changes another's CSS

Question

I want to change an element\'s color Hdr_nav_search_box when focusing on another element Hdr_nav_search_input. Here are the codes : http://jsfiddle

Answer 1

There were a few problems with your styles. Firstly your selector to target the box isn't quite right.

.Hdr_nav_search_input:focus .Hdr_nav_search_box

That is applying selecting all .Hdr_nav_search_box where they are a descendant of .Hdr_nav_search_input. It's actually a sibling so you want to use the next sibling selector +:

.Hdr_nav_search_input:focus + .Hdr_nav_search_box

---

Secondly this selector would be overriding your colour change if it was working.

.Hdr_nav_search_box span,.Hdr_nav_search_box i{
    ...
}

You could use simply

.Hdr_nav_search_box {
    ...
}

---

Here is a demo and the style changes I made to get it working.

jsFiddle

.Hdr_nav_search_input:focus + .Hdr_nav_search_box {
    color: #F00;
 }
.Hdr_nav_search_box {
    line-height: 25px;
    color: gray;
}