title: focusing on an element changes another's CSS
body: <p>I want to change an element's color <code>Hdr_nav_search_box</code> when focusing on another element <code>Hdr_nav_search_input</code>. Here are the codes : <a href="http://jsfiddle.net/FJAYk/4/" rel="noreferrer">http://jsfiddle.net/FJAYk/4/</a> I don not see why this is not working.</p>
  
  <pre><code>&lt;input class="Hdr_nav_search_input" /&gt;
  &lt;div class="Hdr_nav_search_box" /&gt;&lt;span&gt;search for location....&lt;/span&gt;&lt;i&gt;for example: blah blah&lt;/i&gt;&lt;/div&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>.Hdr_nav_search_box{
  padding: 0 5px;
  margin: 7.5px 0;
  width:300px;
  height: 25px;
  background: white;
   }
  .Hdr_nav_search_input:focus .Hdr_nav_search_box{
  color: #d4d4d4;
   }
  .Hdr_nav_search_box span,.Hdr_nav_search_box i{
  line-height: 25px;
  color: gray;
  }
  .Hdr_nav_search_input{
  padding: 0 5px;
  margin: 7.5px 0;
  border: 0;
  z-index: 2;
  position: absolute;
  width:300px;
  height: 25px;
  background: transparent;    
  }
  </code></pre>