码迷,mamicode.com
首页 > 其他好文 > 详细

仿淘宝搜索框

时间:2017-05-13 11:26:36      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:css   message   val   arch   睡眠   body   else   osi   search   

<style type="text/css">
#search{
margin: 100px auto;
width: 300px;
height: 40px;
position: relative;
}
#search input{
width: 200px;
height: 20px;
}
#search label{
position: absolute;
left: 20px;
top: 5px;
cursor: text;
color: #ccc;
}
</style>
<script type="text/javascript">
window.onload = function(){
var txt = document.getElementById("txt");
var message = document.getElementById("message");
txt.oninput = onpropertychange = function(){
if(txt.value == ""){
message.style.display = "block";
}else{
message.style.display = "none";
}
}
}

</script>

<body>
<div id="search">
<input type="text" id="txt">
<label for="txt" id="message">好睡眠好床品</label>
</div>
</body>

仿淘宝搜索框

标签:css   message   val   arch   睡眠   body   else   osi   search   

原文地址:http://www.cnblogs.com/zhaocong/p/6848113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!