placeholderを見やすく！jQuery+css3でつくるフローティングラベル

入力すると消えてしまうinputタグのplaceholderを見やすくするjQuery+css3でつくるフローティングラベル

jQuery関連記事

html

<ul class="inputcolor">
    <li class="field">
        <label class="label" for="input-email">メールアドレス</label>
        <input class="input_t" id="input-email" type="email" placeholder="メールアドレス">
    </li>
</ul>

labelの中に入力中に表示したい項目名を入れます。placeholderの内容と同じにしてしまって問題ないと思います。

jQuery

JavaScript

$('.input_t').on('input', function() {
    var $field = $(this).closest('.field');
    if (this.value) {
        $field.addClass('not-empty');
    } else {
        $field.removeClass('not-empty');
    }
});

対象のフォームに入力されたら、closestで一番近い、.fieldにクラスを付けたり外したりします。
あとはクラスの有無でcssを変更するだけ。

css

.label {
    color: #999;
    font-size: 12px;
    opacity: 0;
    padding: 4px 10px;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    text-align: left;
    -webkit-transform: translateY(3px);
          transform: translateY(3px);
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
 
.not-empty .label {
    opacity: 1;
    -webkit-transform: none;
          transform: none;
}
 
.input_t {
    background-color: #f5f5f5;
    border: 2px solid #e9e9e9;
    color: #333;
    font-size: 22px;
    padding: 10px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    width: 100%;
}
 
.not-empty .input_t {
    padding-bottom: 2px;
    padding-top: 18px;
}

JavaScriptで.not-emptyがついた場合に、opacityやフォーム側のpaddingやfont-sizeを変更して表示します。

あとはcssをアレンジすればオリジナルのフローティングラベルが作れますね！