CSS を使用してパスワード フィールドを模倣するようにテキスト入力のスタイルを設定できますか?

パスワードフィールドに似たテキスト入力のスタイル

質問:

type= を使用して入力要素を作成することは可能ですか? "text" は、純粋に CSS を使用して type="password" と同じように表示されます (つまり、実際の入力を非表示にします)?

答え:

はい、実現できます。この効果は実験的な CSS セレクター -webkit-text-security:

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

を使用しています。この CSS ルールでは、-webkit-text-security と text-security はクラス pw を持つ入力要素をターゲットにし、入力がユーザーの入力を分かりにくくするために、ディスク文字 (•) を表示する必要があります。

例として、次の HTML コードを考えてみましょう:

<code class="html"><input type="text" class="pw" value="abcd">

<button onclick="this.previousElementSibling
.classList.toggle('pw')">Toggle '•'</button></code>

この要素を操作すると、トグル ボタンが表示されます。入力をプレーンテキストとして表示するか、ディスク文字で隠すかを切り替えます。

以上がCSS を使用してパスワード フィールドを模倣するようにテキスト入力のスタイルを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。