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>
时间： 2024-10-19 22:21:22