1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 5 <style type="text/css"> 6 7 <%-- IE6不支持这种方法--%> 8 <%--input:focus, textarea:focus 9 { 10 border: 1px solid #f00; 11 background:#fcc; 12 }--%> 13 14 .focus 15 { 16 border: 1px solid gray; 17 background:gray; 18 } 19 20 21 </style> 22 <script type="text/javascript"> 23 24 $(function () { 25 $(":input").focus(function () { 26 $(this).addClass("focus"); 27 }).blur(function () { 28 $(this).removeClass("focus"); 29 }); 30 31 }); 32 33 </script> 34 </head> 35 <body> 36 <form id="form1" runat="server" method="post"> 37 <div style=" 300px; border: 1px solid black"> 38 <fieldset> 39 <legend>个人基本信息</legend> 40 <div> 41 <label for="username"> 42 名称:</label> 43 <input id="username" type="text" /> 44 </div> 45 <div> 46 <label for="pass"> 47 密码:</label> 48 <input id="pass" type="password" /> 49 </div> 50 <div> 51 <label for="msg"> 52 详细信息:</label> 53 <textarea id="msg" rows="5" cols="10"></textarea> 54 </div> 55 </fieldset> 56 </div> 57 </form> 58 </body> 59 </html>
效果图:
