表单-焦点聚焦改变样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* input:focus,textarea:focus{ border: 1px solid #f00; background: #fcc } */ .focus{ border: 1px solid #f00; background: #fcc } </style> </head> <body> <form action="#" method="POST" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">名称:</label> <input type="text" id="username"> </div> <div> <label for="pass">密码:</label> <input type="password" id="pass"> </div> <div> <label for="msg">详细信息:</label> <textarea id="msg"></textarea> </div> </fieldset> </form> </body> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(":input").focus(function(){ $(this).addClass('focus'); }).blur(function(){ $(this).removeClass('focus') }) }) </script> </html>