入力ボックスのプレースホルダーアニメーションと入力検証を実現する純粋なCSS

さらに興味深いコンテンツについては、https://github.com/abc-club/free-resources をご覧ください。

背景

さっそく、純粋な CSS を使用して次の効果を実現してみましょう。

答えはイエスです。

これは、css:placeholder-shown:valid:invalid疑似クラスとhtml5入力パターン属性の助けを借りて実現できます。

:placeholder-shown 疑似クラスの現在の互換性は次のとおりです。

:placeholder-互換性を表示

コードに直接！ ☺️

ソースコード

https://jsbin.com/qenucaz/edit?html、css、出力

html:

<!DOCTYPE html>
<html>
<ヘッド>
  <メタ文字セット="utf-8">
  <meta name="ビューポート" content="width=デバイス幅">
  <title>JS ビン</title>
</head>
<本文>
  <div class="入力ボックス">
    <input class="input-fill" placeholder="メール" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" 必須>
    <a href="javascript:" class="clear">閉じる</a>
    <label class="input-label">メール</label>
</div>
</本文>
</html>

css:

.入力フィル{
  幅: 100%;
  マージン: 0;
  フォントサイズ: 16px;
  行の高さ: 1.5;
  アウトライン: なし;
  パディング: 20px 16px 6px;
  境界線: 1px 透明の実線;
   背景: #f5f5fa;
  境界線の半径:10px;
  トランジション: 境界線の色 .25s;
}
.input-fill:placeholder-shown::placeholder {
    色: 透明;
    
}
.入力ボックス{
  幅: 50%;
    位置: 相対的;
}
.入力ラベル {
    位置: 絶対;
    左: 16px; 上: 14px;
    ポインタイベント: なし;
    色:#BEC1D9;
   パディング: 0 2px;
    変換の原点: 0 0;
    ポインタイベント: なし;
    移行: すべて .25;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    変換: スケール(0.75) 移動(0px, -14px);    
}
.input-fill:フォーカス{
  境界線: 2px実線 #1d31aa;
}

。クリア{
  位置:絶対;
  上:10px;
  右:-20px;
   表示: なし;
    移行: すべて .25;
}
.input-fill::-ms-clear { 表示: なし; }
.input-fill:not(:placeholder-shown) + .clear { display: inline; }

.input-fill:有効{
 境界線の色: 緑;
 ボックスシャドウ: インセット 5px 0 0 緑;
}
.input-fill:not(:placeholder-shown):invalid {
 境界線の色: 赤;
 ボックスシャドウ: インセット 5px 0 0 赤;
}

もっと

さらに興味深いコンテンツについては、https://github.com/abc-club/free-resources をご覧ください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL テーブルスペースの断片化の概念と関連する問題の解決策

>>: HTMLタグオーバーフロー処理アプリケーション