1.定义样式: [code] <style> .demo_search { display:inline-block; position:relative; height:27px; margin:60px; } .demo_search:hover { -webkit-box-shadow:0 0 3px #999; -moz-box-shadow:0 0 3px #999 } .demo_search .demo_sinput { float:left; width:130px; height:19px; line-height:19px; padding:3px 5px; border:#A7A7A7 1px solid; background:white; color:#888; font-size:12px; -webkit-transition:.3s; -moz-transition:.3s; outline: none; } .demo_search .demo_sinput:focus { width:200px; } .demo_search .demo_sbtn { cursor:pointer; height:27px; font-size:12px; float:left; width:50px; margin-left:-1px; background:#eee; display:inline-block; padding:0 12px; vertical-align:middle; border:#A7A7A7 1px solid; color:#666; } .demo_search .demo_sbtn:hover { background:#ddd; }</style> [/code] 2.html代码: [code] <form class="demo_search" action="//www.sharejs.com" method="get"> <input class="demo_sinput" type="text" name="s" /> <input class="demo_sbtn" type="submit" value="搜索" /></form> [/code] 本范例仅仅使用了CSS3实现,无需js代码,可惜的是不能在ie下使用,鄙视ie
