用css3和jQuery制作精美的表单

用css3和jQuery制作一个简单的精美表单

html代码如下：

<span class="title">Mask Your Input Forms and Make It Beauty</span> <br/><br/> <div id="container"> <p class="separator"><br/></p> <p class="small-title">Too Plain</p> <input class="too-plain" value="Enter your email here" /> <p class="separator"><br/></p> <p class="small-title">Fading The Label</p> <form> <label class="username-label" for="username">Username</label> <input type="text" name="username" class="username" /> <label class="password-label" for="password">Password</label> <input type="password" name="password" class="password" /> </form> <p class="separator"><br/></p> <p class="small-title">Sliding? Don't Worry</p> <form> <label class="username-label-sliding" for="username-sliding">Username</label> <input type="text" name="username" class="username-sliding" /> <label class="password-label-sliding" for="password-sliding">Password</label> <input type="password" name="password" class="password-sliding" /> </form> <p class="separator"><br/></p> </div>

css代码如下：

* { margin:0; padding:0; } body { text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; line-height:1.5em; margin-top:8%; background:#eaeaea; } input { padding:7px; border:5px solid #e0e0e0; -webkit-border-radius:20px; border-radius:20px; -moz-border-radius:20px; } input:focus { outline:none; } #container { text-align:left; width:700px; margin-left:auto; margin-right:auto; } .separator { border-bottom:1px dashed #ccc; margin-bottom:3px; } .title { font-size:30px; margin-bottom:1.5em; font-weight:bold; font-style:italic; text-shadow:0 2px 0 #fff; } .small-title { font-size:20px; margin-bottom:0.5em; font-weight:bold; font-style:italic; text-shadow:0 2px 0 #fff; } .username-label, .password-label, .username-label-sliding, .password-label-sliding { position:absolute; margin:9px 9px 9px 12px; } .username-sliding, .password-sliding { width:150px; } a, a:visited, a:hover { text-decoration: none; color: #000; }

jQuery代码如下：

$(document).ready(function(){ $('.too-plain').focus(function(){ if($(this).val()=="Enter your email here") {$(this).val("");} }).blur(function(){ if($(this).val()=="") { $(this).val('Enter your email here'); } }); $(".username-label,.password-label").animate({ opacity: "0.4" }).click(function(){ var thisFor=$(this).attr("for"); $('.'+thisFor).focus(); }) $(".username").focus(function(){ $(".username-label").animate({opacity:"0"},"fast"); if($(this).val()=="username") { $(this).val()==""; } }).blur(function(){ if($(this).val()=="") { $(this).val()=="username"; $(".username-label").animate({opacity:"0.4"},"fast"); } }) $('.password').focus(function(){ $(".password-label").animate({opacity:"0"},"fast"); if($(this).val()=="password"){ $(this).val()==""; } }).blur(function(){ if($(this).val()=="") { $(this).val()=="password"; $('.password-label').animate({opacity:"0.4"},"fast"); } }); $('.username-label-sliding,.password-label-sliding').animate({opacity:"0.4"}).click(function(){ var thisFor=$(this).attr('for') $('.'+thisFor).focus(); }) $('.username-sliding').focus(function() { $('.username-label-sliding').animate({ marginLeft: "7em" }, "fast"); if($(this).val() == "username") $(this).val() == ""; }).blur(function() { if($(this).val() == "") { $(this).val() == "username"; $('.username-label-sliding').animate({ marginLeft: "12px" }, "fast"); } }); $('.password-sliding').focus(function() { $('.password-label-sliding').animate({ marginLeft: "7em" }, "fast"); if($(this).val() == "password") { $(this).val() == ""; } }).blur(function() { if($(this).val() == "") { $(this).val() == "password"; $('.password-label-sliding').animate({ marginLeft: "12px" }, "fast"); } }); })

在firefox3.6，ie9,chrome中预览效果下图：



在ie7/8中预览效果如下图：