编辑本博客
- 输入框，this.oninput事件监控输入框的状态
- 父相对定位，子元素绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟tb搜索框</title> <style type="text/css"> *{ padding: 0; margin: 0; } #search{ position: relative; /*float: left;*/ width: 500px; /*height: 50px;*/ margin: 0 auto; background-color: #556B2F; } input{ outline: none; display: block; float: left; width: 200px; height: 30px; font-size: 20px; border: 1px solid red; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding-left: 5px; } #msg{ left: 10px; position: absolute; font-size: 10px; line-height: 30px; color: #A9A9A9; } </style> </head> <body> <div id="search"> <input type="text" id="text"><!--行内元素--> <label for="text" id="msg">Search</label> </div> <script type="text/javascript"> var txt=document.getElementById("text"); var msg=document.getElementById("msg"); txt.oninput=function (ev) { if(this.value==""){ msg.style.display="block"; }else { msg.style.display="none"; } } </script> </body> </html>