Jquery 简略的漂亮HTML表单元素
日期：2014-05-17 浏览次数：20744 次
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 class="contentA">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Last name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
</div>
<div style="float:left; margin-right:20px;">
第二部分
<div class="content">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Last name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
</div>
</form>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
