<!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; 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>
再做项目的时候经常遇到的问题，以前只是做静态页面，现在要加效果了，所以百度了一下，觉得特别有帮助到我。所以跟你们分享一下