<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
/*搜索盒子（父亲）要相对定位，因为label要绝对定位*/
.search{
200px;
height:30px;
margin:200px auto;
position:relative;
.search input{
200px;
height:25px;
}
/*label绝对定位，距离search框顶部8px,左边10px，label中的文字颜色浅，字号小,要求鼠标放在任何一个字上都会变成光标*/
.search label{
position:absolute;
top:8px;
left:10px;
font-size:12px;
color:#ccc;
cursor:text; /*鼠标放在任何文字上都会变成光标 */
}
</style>
<!--js部分，当鼠标放在文本框中，oninput，的时候，如果文本框中的值是空的，label要显示出来，否则隐藏。-->
<script>
window.onload=function(){
function $id(id){
return document.getElementById(id);
}
$id("txt").oninput=function()
{
if(this.value=="")
{
$id("message").style.display="block";
}
else
{
$id("message").style.display="none";
}
}
}
</script>
</head>
<body>
<!--一个搜索的盒子，里面有一个文本框，和一个label（文本框中显示的浅色文字）-->
<div class="search">
<input type="text" id="txt"/>
<label for="txt" id="message">必败的国际大牌</label> <!--注意label for"txt",使用可以让label的内容放在文本框中-->
</div>
</body>
</html>