JS 实现可伸缩搜索框
来源：互联网 发布：清洁度检测软件 编辑：程序博客网 时间：2024/05/16 04:35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript">$(function(){$('#ser').blur(function(){var sval = $('#ser').val();if(sval != ""){$('#ser').attr('style','width:250px');}else{$('#ser').attr('style','width:130px');}});$('#ser').click(function(){$('#ser').attr('style','width:250px');});});</script><style type="text/css"></style><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_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></head><body><form class="demo_search" action="" method="post"><input class="demo_sinput" type="text" name="s" id="ser"/><input class="demo_sbtn" type="submit" value="搜索" /></form></body></html>
