入力ボックスのプレースホルダーアニメーションと入力検証を実現する純粋な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 テーブルスペースの断片化の概念と関連する問題の解決策
推薦する
MySQL thread_stack 接続スレッドの最適化
MySQL は、ネットワーク経由だけでなく、名前付きパイプ経由でも接続できます。MySQL への接続...
Tomcat プロジェクトを展開する一般的な方法のいくつか [テスト済み]
1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...
PSを使用して2分でxhtml+cssウェブサイトのホームページを作成します
xhtml+css のウェブサイト再構築、ウェブ標準などについては、記事が多すぎるので繰り返しません...
MySQLコマンドラインでSQLファイルを実行するいくつかの方法
目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...
ウェブページのエンコードにおける GB2312、GBK、UTF-8 の違い
まず、GB2312、GBK、UTF-8 はすべて文字エンコーディングであることを理解する必要がありま...
Spring Cloud での Docker デプロイメントに jib を使用する詳細な手順
ジブの紹介Jib は Google が開発した、Java アプリケーションの Docker および ...
Linux で rc.local ファイルがない場合の完璧なソリューション
新しい Linux ディストリビューションには rc.local ファイルがなくなりました。サービス...
MySQLのストレージエンジンについてお話しましょう
基礎リレーショナル データベースでは、各データ テーブルはファイルに相当し、異なるストレージ エンジ...
ブルートフォース攻撃を防ぐためのシェルスクリプト設定
シェルスクリプトはアクセス制御を設定し、複数回のログイン失敗後にIPをブロックしてSSHのブルートフ...
Linux でファイルを削除するさまざまな方法の効率の比較
Linux で大量のファイルを削除する効率をテストします。まず500,000個のファイルを作成する$...
nacos が mysql に接続できない場合の解決策
理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...
低バージョンの Druid 接続プール + MySQL ドライバー 8.0 により、スレッドがブロックされ、パフォーマンスが制限される
目次現象根本原因分析getLastPacketReceivedTimeMs() メソッドの呼び出し時...
Linux lessコマンド例の詳細な説明
ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...
NexusはHTTPSプロトコルをサポートするためにnginxプロキシを使用します
背景すべての会社の Web サイトは HTTPS プロトコルをサポートする必要があります。Aliba...
Webデザインチュートリアル（1）：手順と全体レイアウト
<br />注：ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...