我在尝试对焦输入#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%;
}