表單提示美化效果程式碼例項

antzone發表於2017-04-19

下面分享一個比較另類美觀的效果，直接看程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0;
  padding:0;
}
body{
  font-size:14px;
  font-family:"微軟雅黑";
  color:#333;
}
.wrap{
  width:640px;
  height:320px;
  margin:50px auto;
  border:1px solid #eee;
}
.wrap .wrap_Iten{
  position:relative;
  margin:20px auto;
}
.item_tip {
  background-color: #fff;
  color: #999;
  font-size: 12px;
  left: 12px;
  padding: 0 3px;
  position: absolute;
  top: 10px;
  transition: all .2s linear 0s;
}
.form_input {
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  font-size: 12px;
  padding: 9px 10px;
  transition: border-color .15s ease-in-out 0s;
  width: 278px;
  outline:none;
}
.item_tip_focus{
  color:#5188a6;
  font-size:12px;
  top:-8px;
}
.form_input-focus{
  border-color:#5188a6;
  outline:0 auto;
}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
function focusInputLoginBox(obj) {
  obj.addClass("form_input-focus");
  obj.prev(".item_tip").addClass("item_tip_focus")
}
function blurInputLoginBox(obj) {
  var v = obj.val();
  if (v == "") {
    obj.removeClass("form_input-focus");
    obj.prev(".item_tip").removeClass("item_tip_focus")
   } else {
     obj.addClass("form_input-focus");
     obj.prev(".item_tip").addClass("item_tip_focus")
   }
}
$(document).ready(function () {
  $("input").blur(function () {
    blurInputLoginBox($(this))
  })
  $("input").focus(function () {
    focusInputLoginBox($(this))
  })
})
</script>
</head>
<body>
<div class="wrap">
  <form action="">
    <div class="wrap_input">
      <div class="wrap_Iten">
        <div class="item_tip">使用者名稱/郵箱</div>
          <input type="text" tabindex="1" value="" name="username" class="form_input">
        </div>
      </div>
    </form>
  </div>
</body>
</html>

點選提示文字後面的空白部分，提示文字會上浮。

相關文章