html - How to change another div css when focus another -

html - How to change another div css when focus another -

i'm trying alter div #header-search when focus input #search. when people focus search field bigger!

<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>

style:

#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%; }

html css