html - HTMLパスワードフィールドのスタイルを設定するにはどうすればよいですか？デフォルトのドットをカスタムのものに置き換えます

Question

パスワードフィールドのスタイル設定に問題があります。下の画像のように、デフォルトのドットをカスタム画像に置き換える方法を知る必要があるだけです。

Answer 1

このトピックを確認してください。私はそこに何か奇妙なものを見つけました:)

input[type="password"]
{
  -webkit-text-security: disc;
}

Answer 2

CSSではそれを行うことはできません。カスタムコントロールを作成する必要があります。

そのための1つの方法は、すべての文字が同じグリフであるカスタムフォントを作成することです。もう1つは、JSを使用してキーアップイベントをキャプチャし、背景画像が繰り返されるdivを生成することです。

（それらの方法がわからない場合は、そのままにしておきます。初心者の場合、特に簡単な作業ではありません。）

Answer 3

デフォルトのドットをカスタム イメージに置き換える方法

純粋な CSS でクロスブラウザーを使用することはできません。JavaScript と多くのイベント ハンドラーを使用してカスタム パスワード フィールドを構築しようとすることもできますが、特にパスワード フィールドに異なるデザインまたはカスタム インタラクションを使用する可能性があるモバイル デバイスの場合は、いずれかのブラウザーで問題が発生することは避けられません。

そのままにして、デフォルトのテキストを使用し、ユーザーの期待を台無しにしないようにしてください。