说明：代码取自网络，注释为笔者学习时添加！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>当前输入框高亮显示</title> <style> body,form,h2,p,input{/*去除内外边距*/ margin:0; padding:0; } body{ color:#4f4f4f;/*黑色*/ font:14px/1.5 5fae8f6f96c59ed1; } form{ width:400px; background:#fef4eb;/*灰色*/ border:2px solid #f60;/*桔红色*/ padding-bottom:10px; overflow:hidden; zoom:1; margin:10px auto;/*左右置中*/ } form h2{ color:#fe791e; font-size:16px; background:#ffebd7; border-bottom:2px solid #f60; padding:5px 10px; } form p{ float:left; clear:both;/*清除浮动*/ width:100%; height:31px; margin-top:10px; line-height:31px; } form label,form input{ float:left;/*左浮动*/ } form label{ width:100px; height:31px; text-align:right; } form input{ border:0; font-family:5fae8f6f96c59ed1; background:url(img/input.png) no-repeat; } form .f-text, form .f-text-high{ width:203px; height:31px; padding-left:5px; line-height:31px; } form .f-text-high{ background-position:0 -31px;/*上移*/ } form .f-btn{ color:#fff; width:104px; height:31px; cursor:pointer; font-size:16px; background:#f60; line-height:31px; border-radius:5px;/*圆角*/ } </style> <script> //通过上移图片位置，从而显示不同的背景 window.onload = function () { var aInput = document.getElementsByTagName("input");//获取所有input引用 var i = 0; for (i = 0; i < aInput.length - 1; i++) { aInput[i].onfocus = function () { this.className = "f-text-high"; }; aInput[i].onblur = function () { this.className = "f-text"; } } }; </script> </head> <body> <form> <h2>用户登录</h2> <p><label>用户名：</label><input class="f-text" type="text" /></p> <p><label>密码：</label><input class="f-text" type="password" /></p> <p><label></label><input class="f-btn" type="button" value="登录" /></p> </form> </body> </html>