文本框的颜色交替

      这几天看来网易通行证的注册注册页面 , 有个文本框的颜色交替的效果,也行模拟一下啊 呵呵,贴上我尝试的代码 欢迎你的访问，
,如果有好的方法 给我指导一下
    方法一:
 

<style type="text/css">
    .a{}{ background:#096;}
    .b{}{ background:#FFF}
</style>

<table>
  <tr>
    <td>
<input type="text" onfocus="this.className='a'"  onblur="this.className='b'"/>
    </td> 
 </tr>
  <tr>
    <td>
     <input type="text" onfocus="this.className='a'"  onblur="this.className='b'"/>
    </td>
 </tr>
</table>

方法二

<table>
   <tr>
    <td> <input type="text" onblur="change(this,'white')" onfocus="change(this,'#c9ff94')"/></td>
    <td> <input type="text" onblur="change(this,'white')" onfocus="change(this,'#c9ff94')"/></td>
   </tr>
</table>

<script language="javascript">
   function change(obj,color)
   {
      obj.style.backgroundColor=color;
   }
</script>

方法三

 <style type="text/css">
   input{star:expression(onfocus=function()
            {this.style.backgroundColor="greenyellow"},
        onblur=function(){this.style.backgroundColor="#FFFFFF"}) 
    }
 </style>
<table>
   <tr>
     <td><input type="text"></td>
     <td><input type="text"></td>  
   </tr>
  </table>

总结一下
方法一 运用css的className属性动态引用 实现的效果,如果的页面上有几十甚至上百个链接,每个都要引用,不利于代码的优化,这样看代码不简洁
方法二 采用的是js函数来控制,html标签调用onfocus 和onblur方法,需要每次都引用，重复代码量也比较大
方法三:CSS的自定义属性Expression，可以自己定义属性，自己在属性里写需要的代码，这样就可以结合CSS的特性与JS特效，实现对整体页面上相同元素的控制,代码做到了优化,方法可取