创意输入框

最近公司在做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; width: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{ width:100%; margin:15px auto; position:relative;}
.form-input{ display:block; border-radius:10px; width: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的兼容~~~~

posted on 2014-04-17 11:33  欧阳不乖  阅读(253)  评论(0)  编辑  收藏  举报

导航