仿淘宝搜索框案例 

<!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{
            width:200px;
            height:30px;
            margin:200px auto;
            position:relative;
        .search input{
            width: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>

 

posted @ 2019-07-17 00:33  shanlu  阅读(835)  评论(0)    收藏  举报