<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style>
*{margin: 0;padding: 0;font-family: "微软雅黑";}
input{outline: none;border: 0;}
.search_box{ width: 500px; height: 35px; border:2px solid teal; margin: 100px auto; font-size: 14px;}
.search_box input,.search_box label{ height: 35px; line-height: 35px; padding:0 10px;}
.search_box .search_txt{float: left; width: 420px; position: relative; overflow: hidden;}
.search_box .search_txt input{ width: 100%; position: relative; background: transparent;}
.search_box .search_txt label{ position: absolute; top: 0; left: 0; width: 100%; color: #999;}
.search_box .search_btn{ float: left; width: 80px; background: teal; font-size: 16px; color: #FFF; cursor: pointer;}
</style>
</head>
<body>
<div class="search_box">
<div class="search_txt">
<label>请输入需要搜索的内容</label>
<input type="text" value=""/>
</div>
<input type="button" value="搜 索" class="search_btn"/>
</div>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var temp = 0;
$(".search_txt input").focus(function(){
$(this).siblings().hide();
});
$(".search_txt input").blur(function(){
if($(this).val() ==""){
$(this).siblings().show();
}
});
</script>
</body>
</html>
效果图: