CSS を使用してテキスト入力をパスワード フィールドのようにスタイル設定するにはどうすればよいですか?

CSS を使用してパスワード フィールドに似た入力テキストのスタイルを設定する

課題:

多くの Web フォームには、「 type=text」属性。この属性を使用すると、ユーザーは表示テキストを入力できますが、「type=password」属性を持つ入力フィールドのように、代わりにアスタリスクを表示して機密情報を隠すことが望ましい場合があります。

CSS による解決策:

CSS は、この課題に対処するソリューションを提供します。 -webkit-text-security プロパティと text-security プロパティは、ブラウザでのテキスト入力を隠す方法を提供します:

コード:

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

実装:

クラス "pw" を入力フィールドに適用します:

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

追加機能:

をサポートしていないブラウザの場合これらのプロパティを使用する場合は、フォールバック オプションを提供するか、JavaScript ベースのソリューションを使用することを検討してください。

ブラウザの互換性:

-webkit-text-security プロパティは WebKit でサポートされています- text-security プロパティは最新のブラウザでサポートされています。 IE8 との互換性を確保するには、CSS フォールバックまたは JavaScript ソリューションをお勧めします。

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