Jquery 简单的漂亮HTML表单元素
根据网上的一个网页稍微修改了一下，第一部分和第二部分效果不同，如果只需要一种效果，删除另外一种的JS即可，第一个是全div背景，第二个是单行背景，特别简单的一个表单样式，原链接
代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>jqueryform</title><style> body{font-family:Arial, Helvetica, sans-serif;font-size: 13px;}.content,.contentA{padding:10px;width:370px}.left{width:150px;float:left;padding:7px 0px 0px 7px;min-height:24px;}.right{width:200px;float:left;padding:5px;min-height:24px;}.clear{float:none;clear:both;height:0px;}.row{background-color:none;display:block;min-height:32px;}.text{width:190px;}.ruler{width:400px; border-bottom:dashed 1px #dcdcdc;}tr:focus{background-color:#fcfcf0;}td{vertical-align:top;}.over{background-color:#e6e2af;}.out{background-color:none;}</style><script type="text/javascript" src="jquery.js"></script><script>$(document).ready(function(){$('.content .left, .content input, .content textarea, .content select').focus(function(){$(this).parents('.content').addClass("over");}).blur(function(){$(this).parents('.content').removeClass("over");});$('.contentA .left, .contentA input, .contentA textarea, .contentA select').focus(function(){$(this).parents('.row').addClass("over");}).blur(function(){$(this).parents('.row').removeClass("over");});});</script></head><body><form method="post"><div style="float:left; margin-right:20px; width:400px;">第一部分<div type="text" /></div><div type="text" /></div><div type="text" /></div><div type="text" /></div><div type="text" /></div><div type="text" /></div><div type="text" /></div><div type="text" /></div><div class="clear"></div></div></div></div></form></body></html>