最近公司在做HTML5方面的项目，会提出很多稀奇古怪的需求，昨天刚好就有一个很有意思的效果，拿来这里和大家分享一下，虽不是原创~的~说~
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;} input{ padding:0; margin:0;} .container{ margin:0 auto; 480px;} .form-horizontal{ margin-top:50px; border:1px solid #ccc; border-radius:3px;} .form-horizontal .form-title{ border-bottom:1px solid #ccc; padding:0px 15px; color:#333;} .form-horizontal .form-content{ padding:15px;} .form-item{ 100%; margin:15px auto; position:relative;} .form-input{ display:block; border-radius:10px; 100%; height:46px; font-size:14px; line-height:1.428571429; box-sizing:border-box; vertical-align:middle; padding:9px 12px; border:1px solid #ccc; -webkit-transition:border-color ease-in-out 0.15s; -moz-box-sizing:border-box; transition:border-color ease-in-out 0.15s; color:#ccc;} .form-input:focus{ border-color:#66afe9; color:#333; outline:0;} .item-tip{ position:absolute; color:#ccc; top:11px; left:12px; transition:all linear 0.2s; background-color:#fff; padding:0px 3px;} .item-tip-focus{ top:-8px; font-size:12px; color:#66afe9;} </style> </head> <body> <div class="container"> <div class="form-horizontal"> <div class="form-title"> <h1>Float Title Input</h1> </div> <div class="form-content"> <div class="form-item"> <div class="item-tip" style="color:rgb(205,205,205);">姓名</div> <input class="form-input" type="text" name="name" /> </div> <div class="form-item"> <div class="item-tip" style="color:rgb(205,205,205);">年龄</div> <input class="form-input" type="text" name="age" /> </div> <div class="form-item"> <div class="item-tip" style="color:rgb(205,205,205);">性别</div> <input class="form-input" type="text" name="gender" /> </div> </div> </div> </div> </body> </html> <script src="../各种函数/JQ.js"></script> <script> $('.form-input').on('focus',function(e){ var $this=$(this); var $tip=$this.prev(); $tip.addClass('item-tip-focus'); $tip.css('color','#66afe9'); }); $('.form-input').on('blur',function(e){ var $this=$(this); var $tip=$this.prev(); if($this.val().trim()===''){ $tip.removeClass('item-tip-focus'); } $tip.css('color','#ccc'); }); $('.item-tip').on('click',function(e){ $(this).next().focus(); }); </script>
以上代码中引用的是我自己jq文件 大家自己测试时请重新引入文件~~~~目前只做了chrome和Firefox的兼容~~~~