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

下線アニメ入力

フォーカスすると下線が中央から左右に伸びる入力欄。WordPressのお問い合わせページで、シンプルながら動きのあるフォームを作れます。

cssinput

プレビュー

ソースコード

HTML

<div class="d04-02-02-field">
          <input type="email" placeholder="メールアドレス">
          <span class="d04-02-02-bar"></span>
        </div>

CSS

.d04-02-02-field{position:relative;width:min(280px,100%)}
        .d04-02-02-field input{
          width:100%;padding:12px 4px;font-size:15px;
          border:none;border-bottom:2px solid #d5d9e0;
          background:transparent;outline:none;
        }
        .d04-02-02-field input::placeholder{color:#9aa3b2}
        .d04-02-02-bar{
          position:absolute;left:0;bottom:0;width:100%;height:2px;
          background:#4a6cf7;transform:scaleX(0);transform-origin:center;
          transition:transform .35s ease;
        }
        .d04-02-02-field input:focus ~ .d04-02-02-bar{transform:scaleX(1)}

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