라벨이 애니메이션하는 한 줄 텍스트 양식

양식 표시 결과

폼의 특징 상세・주의사항

양식 소스 코드 / HTML+CSS+jQuery

<form>
  <div>
    <input type="text" autocomplete="off">
    <label class="nameform">Name</label>
  </div>
  <div>
    <input type="text" autocomplete="off">
    <label class="idform">ID</label>
  </div>
  <div>
    <input type="text" autocomplete="off">
    <label class="passform">Password</label>
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/index.js"></script>

form {
    font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    width: 300px;
    margin: 20px auto 0;
}
div {
    position: relative;
    margin-top: 18px;
}
input {
    width: 100%;
    font-size: 18px;
    color: #333333;
    font-family: inherit;
    outline:none;
    border: none;
    border-bottom: 1px solid #757575;
    padding: 8px 0 3px 0;
}
label {
    font-size: 18px;
    font-weight: 300;
    color: #bbbbbb;
    position: absolute;
    left: 0px;
    top: 10px;
    pointer-events: none;
    -webkit-transition:all 0.1s ease; 
    transition: all 0.1s ease;
}
input:focus {
    border-bottom: 1px solid #4a89dc;
}
input:focus ~ label,
input.inputted ~ label {
    color: #4a89dc;
    -webkit-transform: scale(0.66);
    -ms-transform : scale(0.66);
    transform: scale(0.66);
    top: -16px;
}
input:focus ~ label.nameform,
input.inputted ~ label.nameform {
    left: -8px;
}
input:focus ~ label.idform,
input.inputted ~ label.idform {
    left: -4px;
}
input:focus ~ label.passform,
input.inputted ~ label.passform {
    left: -14px;
}

// js/index.js
$(document).ready(function() {
    $('input').blur(function() {
        var $this = $(this);
        if ($this.val())
            $this.addClass('inputted');
    else
        $this.removeClass('inputted');
    });
});