パーツ番号 04-02-01 ・ CSSのみ

フローティングラベル入力

フォーカスや入力時にラベルが枠上へ浮き上がる入力欄。Contact Form 7のお問い合わせフォームをモダンな見た目に整えたいときに便利です。

cssinput

プレビュー

ソースコード

HTML

<div class="d04-02-01-field">
          <input type="text" id="d04-02-01-name" placeholder=" ">
          <label for="d04-02-01-name">お名前</label>
        </div>

CSS

.d04-02-01-field{position:relative;width:min(280px,100%)}
        .d04-02-01-field input{
          width:100%;padding:14px 16px;font-size:15px;
          border:2px solid #d5d9e0;border-radius:8px;background:#fff;
          outline:none;transition:border-color .25s;
        }
        .d04-02-01-field input:focus{border-color:#4a6cf7}
        .d04-02-01-field label{
          position:absolute;left:12px;top:50%;transform:translateY(-50%);
          padding:0 6px;color:#8a93a3;font-size:15px;background:#fff;
          pointer-events:none;
          transition:top .25s,font-size .25s,color .25s;
        }
        .d04-02-01-field input:focus + label,
        .d04-02-01-field input:not(:placeholder-shown) + label{
          top:0;font-size:12px;color:#4a6cf7;
        }

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