如何在关注另一个时改变另一个div css

Question

我在尝试对焦输入#search时尝试更改div＃header-search。所以当人们关注时，搜索领域变大了！

 <div id="header-search">

  <form >
      <div class="input-box">
         <input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search" autocomplete="off">
    <button type="submit" title="Search" class="button search-button"></button>
     </div>

     <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>

  </form>
       </div>

风格：

 #header-search{
display: block;
position: absolute;
top: 0px;
left: 200px;
width: 40%;
height: 80px;}

 #search{
width: 100%;
height: 80px;
}

 #search:focus #header-search{
left: 0px;
width: 100%;

}