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 258px; 16 height: 40px; 17 background-color: gray; 18 margin: 100px auto; 19 20 } 21 .search #txt { 22 float: left; 23 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 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>