搜索引擎点击隐藏文字 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7     <style>
 8         input,
 9         button {
10             padding: 0;
11             border: 0 none;
12             outline-style: none;
13         }
14         .search {
15             width: 258px;
16             height: 40px;
17             background-color: gray;
18             margin: 100px auto;
19             
20         }
21         .search #txt {
22             float: left;
23             width: 208px;
24             height: 40px;
25             background: url(images/left.jpg) no-repeat;
26             padding-left: 8px;
27             color: #ccc;
28         }
29         .search button {
30             float: left;
31             width: 42px;
32             height: 40px;
33             background: url(images/right.jpg) no-repeat;
34         }
35 
36     </style>
37 
38     <script>
39         window.onload = function () {
40             function $(id){
41                 return document.getElementById(id);
42             }
43 //            获取焦点
44             $("txt").onfocus = function () {
45                 if($("txt").value == "请输入..."){
46                     $("txt").value = "";
47                     $("txt").style.color = "#333";
48                 }
49             }
50             $("txt").onblur = function () {
51                 if($("txt").value == ""){
52                     $("txt").value = "请输入...";
53                     $("txt").style.color = "#ccc";
54                 }
55             }
56 
57 
58         }
59     </script>
60 <body>
61     <div class="search">
62         <input type="text" id="txt" value="请输入..."/>
63         <button></button>
64     </div>
65 </body>
66 </html>

 

posted @ 2017-07-02 20:46  清风白水  阅读(254)  评论(0)  编辑  收藏  举报