第一種：（文本框獲取焦點后，它的顏色會有所變化，當失去焦點的時候，恢復為原來的樣子）
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="jquery-1.11.3.js"></script> <style type="text/css"> input:focus ,textarea:focus{ border: 1px solid #f00; background: #fcc; } </style> <body> <form action="#" method="POST" id="regForm"> <fieldset> <legend>個人基本信息</legend> <div> <label for="username">名稱：</label> <input id="username" type="text"> </div> <div> <label for="pass">密碼：</label> <input id="pass" type="password"> </div> <div> <label for="msg">詳細信息：</label> <textarea id="msg"></textarea> </div> </fieldset> </form> </body> </html>
只不過IE中不兼容
第二種IE兼容：
1 <html> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <script type="text/javascript" src="jquery-1.11.3.js"></script> 4 <style type="text/css"> 5 6 .focus{ 7 border: 1px solid #f00; 8 background: #fcc; 9 } 10 </style> 11 <script type="text/javascript"> 12 $(function(){ 13 $(":input").focus(function(){ 14 $(this).addClass("focus") 15 }).blur(function(){ 16 $(this).removeClass("focus"); 17 }) 18 }) 19 20 </script> 21 <body> 22 <form action="#" method="POST" id="regForm"> 23 <fieldset> 24 <legend>個人基本信息</legend> 25 <div> 26 <label for="username">名稱：</label> 27 <input id="username" type="text"> 28 </div> 29 <div> 30 <label for="pass">密碼：</label> 31 <input id="pass" type="password"> 32 </div> 33 <div> 34 <label for="msg">詳細信息：</label> 35 <textarea id="msg"></textarea> 36 </div> 37 38 </fieldset> 39 </form> 40 41 </body> 42 </html>