JS 实现可伸缩搜索框

最新推荐文章于 2021-08-17 08:51:55 发布

Tonvchong

最新推荐文章于 2021-08-17 08:51:55 发布

阅读量2.5k

点赞数

分类专栏： Jsp Html Javascript

本文链接：https://blog.youkuaiyun.com/tonvchong/article/details/9289077

版权

Jsp 同时被 3 个专栏收录

23 篇文章

订阅专栏

Javascript

16 篇文章

订阅专栏

Html

13 篇文章

订阅专栏

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