在 Web 开发当作不可免的要碰到表单的输入框，那么当我们在获取一个输入框并输入必要的东西时，怎么样才能让使用者更清楚的知道当前输入的是哪个输入框？ 这就要使用到输入框高亮。目前使用效果最多的有两种，一种是如上图那么整个当前的背景全部高亮；另外一种是仅把当前输入框的边框高亮。原理也很简单，就是当输入框获得和失去焦点是触发事件。

实现方法也有几种：
1. 最简单的方法就是在输入框加入 onfocus 和 onblur 事件并设置执行方法，比如：

优点：除了直接外我不知道说什么
缺点：一个输入框对应一个，多了话就麻烦了，不建议使用。

2. 使用 jQuery 或去他 JavaScript 框架
这里以 jQuery 为例：

$(document).ready(function(){
        //获得焦点
	$("input").focus(function() {
                // 添加 Class
		$(this).parent().addClass("curFocus");
	});

       //失去焦点
       $("input").blur(function() {
                //删除 Class
		$(this).parent().removeClass("curFocus")
	});
});

这里只是把核心代码贴了出来，这里推荐看：Improved Current Field Highlighting in Forms。里面写的清清楚楚。

3. 纯 CSS 打造
不想或者不会使用 JavaScriot？没有关系，仅 CSS 也可以做出这样的效果哦，不信？好，接着看：我们在写 CSS 的时候会经常使用到几个伪类，尤其是用在链接（a）上面，比如 a:hover, a:visited 等等，另外还有一个伪类就是 :focus，对，没错，获得焦点。
另外在定义输入框需要定义 input ，但是 input 的范围太广，包括了 button, text, password等等的元素。这里需要使用 type 指定某一元素，比如 定义 text ，就是使用：

input[type=text]{}

那么好了，使用 CSS 高亮的方法出来了：

            #example input[type=text], #example textarea {
                margin: 5px 5px 5px 0;
                width: 194px;
            }

            #example input[type=text]:focus, #example textarea:focus {
                border: #e6e2af solid;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                border-width: 5px 5px 5px 155px;
                left: -153px;
                margin: 2px 2px 2px 0;
                position: relative;
                z-index: 0;
            }

这里还有一个演示，大家直接看源代码吧：使用 CSS 高亮输入框

这是我目前收集并了解到的实现方法，希望对大家有多帮助