パーツ番号 08-10-05 ・ JavaScript使用

フォーカスで浮き上がるフローティングラベル

Tabキーでフォーカスすると同時にラベルが上へ浮き上がり、下線カラーがアクセントに変わります。WordPressのお問い合わせフォーム入力欄に最適です。

jsinput

プレビュー

ソースコード

HTML

<div class="d08-10-05-field">
          <input class="d08-10-05-input" id="d08-10-05-name" type="text" autocomplete="off">
          <label class="d08-10-05-label" for="d08-10-05-name">お名前</label>
        </div>

CSS

.d08-10-05-field{position:relative;width:100%;max-width:240px}
        .d08-10-05-input{width:100%;box-sizing:border-box;padding:18px 12px 8px;font-size:14px;border:none;border-bottom:2px solid #d8dae2;background:#f7f7fb;border-radius:8px 8px 0 0;outline:none;transition:border-color .2s,background .2s}
        .d08-10-05-label{position:absolute;left:12px;top:16px;font-size:14px;color:#8a8f9c;pointer-events:none;transition:transform .2s ease,color .2s ease;transform-origin:left top}
        .d08-10-05-input:focus{border-color:#6a5cff;background:#f1efff}
        .d08-10-05-input:focus + .d08-10-05-label,
        .d08-10-05-input:not(:placeholder-shown) + .d08-10-05-label{transform:translateY(-11px) scale(.78);color:#6a5cff}
        .d08-10-05-input:focus-visible{box-shadow:0 0 0 3px rgba(106,92,255,.18)}

JavaScript

(function(){
        var input=document.querySelector('#item-08-10-05 .d08-10-05-input');if(!input)return;
        input.setAttribute('placeholder',' ');
      })();

クラス名 .d08-10-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。