<!DOCTYPE html>
<html lang=
"en">
<head>
<meta charset=
"UTF-8">
<title>Document</title>
<link rel=
"stylesheet" type=
"text/css" href=
"Font/demo-files/demo.css"/>
<style>
/*1.此处应我的项目需要，加了些特别的设置，如字体、背景色等，按需添加；
2.内层input不加边框，看起来效果会自然一点，所以外层div设置了边框和圆角*/
.box{
margin: 50px auto;
background-
color: #ffffff;
border: 1px solid #eeeeee;
border-
radius: 6px;
font-size:
0.52rem;
text-
align: center;
color: #d2d2d2;
}
/*label标签样式 放在.box下，不至于影响其他的label
采取绝对定位，位置根据需求确定*/
.box label{
z-index:
2;
position: absolute;
left: 15%
;
margin-left: -
8%
;
color: #B2B2B2;
top: 4.8rem;
font-
weight: normal;
}
/**
*input标签样式
*宽度适应外层div
*隐藏边框
*这里有个小技巧，height与line-height值相等，可保证文字垂直居中；但我发现文字比图标略偏下，进行了微调；
*/
.box input{
text-
indent: 10px;
height: 2.04rem;
line-height:
2.04rem;
width: 100%
;
border: none;
outline: none;
}
/**
*图标样式
*绝对定位，自定义颜色
*/
.box i{
position: absolute;
top: 4.8rem;
left: 5%
;
/*margin-left: -15%;*/
color: #B2B2B2;
}
</style>//具体样式自行按照情况调节
</head>
<body>
<div
class=
"box">
<label
for=
"q" id=
"q_label">请输入关键字</label>
<input id=
"q" type=
"text">
<i
class=
"icon icon-search" id=
"q_i"></i>
</div>
<script src=
"js/libs/jquery.3.1.1.js"></script>
<script>
// js判断input输入框中是否有值，以此来判断是否隐藏默认提示信息
//使用keyup事件
$(function() {
$('#q').on(
'keyup',function() {
var len = document.getElementById(
'q').value;
if(len ==
''){
$('#q_label').show();
$('#q_i').show();
}else{
$('#q_label').hide();
$('#q_i').hide();
}
});
})
</script>
</body>
</html>
再做项目的时候经常遇到的问题，以前只是做静态页面，现在要加效果了，所以百度了一下，觉得特别有帮助到我。所以跟你们分享一下
