用css3和jQuery制作一个简单的精美表单
html代码如下:
Mask Your Input Forms and Make It Beauty
Too Plain
Fading The Label
Sliding? Don't Worry
css代码如下:
* { margin:0; パディング:0; } body { text-align:center; font-family:Georgia、「Times New Roman」、Times、セリフ; フォントサイズ:13px; 行の高さ:1.5em; マージントップ:8%; 背景:#eaeaea; } input { padding:7px; ボーダー:5px ソリッド #e0e0e0; -webkit-border-radius:20px; 境界半径:20px; -moz-border-radius:20px; } input:focus { outline:none; #container { text-align:left; 幅:700ピクセル; マージン左:自動; マージン右:自動; .separator { border-bottom:1px 破線 #ccc; マージン-ボトム:3px; } .title { font-size:30px; マージン-ボトム:1.5em; フォントの太さ:太字; フォントスタイル:斜体; テキストシャドウ:0 2px 0 #fff; } .small-title { font-size:20px; マージン-ボトム:0.5em; フォントの太さ:太字; フォントスタイル:斜体; テキストシャドウ:0 2px 0 #fff; } .username-label、.password-label、.username-label-sliding、.password-label-sliding { position:absolute; マージン:9 ピクセル 9 ピクセル 9 ピクセル 12 ピクセル; } .username-sliding、.password-sliding { width:150px; } a、a:visited、a:hover { text-decoration: none; 色: #000; }
jQuery代码如下:
$(document).ready(function(){ $('.too-plain').focus(function(){ if($(this).val()=="ここにメールアドレスを入力してください") {$( this).val("");} }).blur(function(){ if($(this).val()=="") { $(this). val('ここにメールアドレスを入力してください'); } }); $(".username-label,.password-label").animate({ opacity: "0.4" }).click(function(){ var thisFor=$(this).attr("for") ; $('.'+thisFor).focus(); }) $(".username").focus(function(){ $(".username-label") animate({不透明度:"0"}, "高速"); if($(this).val()=="ユーザー名") { $(this).val()==""; ... ).val()=="") { $(this).val()=="ユーザー名"; $(".username-label").animate({opacity:"0.4"},"fast"); } }) $('.password').focus(function(){ $(".password-label").animate({opacity:"0"},"fast"); if($(this).val ()=="パスワード"){ $(this).val()==""; } }).blur(function(){ if($(this).val()=="") { $( this).val()=="パスワード"; $('.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 " }, "高速"); if($(this).val() == "ユーザー名") $(this).val() == ""; }).blur(function() { if($( this).val() == "") { $(this).val() == "ユーザー名"; $('.username-label-sliding').animate({ marginLeft: "12px" }, "fast "); } }); $('.password-sliding').focus(function() { $('.password-label-sliding').animate({ marginLeft: "7em" }, "fast"); if($(this). val() == "パスワード") { $(this).val() == ""; } }).blur(function() { if($(this).val() == "") { $ (this).val() == "パスワード"; $('.password-label-sliding').animate({ marginLeft: "12px" }, "fast"); } }); })
Firefox3.6、ie9、chrome中预览果如下图:
ie7/8中预览效果如下图: