input type=passwordのマスク（黒丸）をアスタリスクに変更したい

Question

前提・実現したいこと

お世話になっております。
<input type="password">のマスク（黒丸）をアスタリスクに変更したいのですが、
調べたところhtmlやcssではそのような実装は出来ないとのことだったのですが、
jsを使ってこれを実装する際は、マスクを消して上に画像を表示させる、ようなやり方しか出来ないのでしょうか？

調べましたが、良いやり方が見つからなかったので、ご教授いただきたいです。

Comments

[K_3578]

回答･･･とは言えないのでここに書いておきます。
自分も特に考えた事が無かったので調べてみましたが、
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/password
からの引用ですが
＞1 つ 1 つの文字がアスタリスク ("*") やドット ("•") のような記号に置き換えられ、隠されます。この文字はユーザーエージェントや OS によって変わります。

とのことらしいので<input type="password">では基本的には難しいんじゃないかと思います。

[..o]

ありがとうございます。
そうですよね、別の方法を探します。
ご丁寧にありがとうございました！

[K_3578]

いえいえ、あくまで個人的に気になったから調べただけなので。
https://q.hatena.ne.jp/1265877976
調べてる時に<input type=text>ですが上記URLの方法もあるみたいでしたので、既に検討されたかもしれませんが、良かったらどうぞ。

Answer 1

SafariとChromeで使える非標準の-webkit-text-securityというプロパティがありますが、これでもアスタリスクにはできませんね。

<input type=text>にして、全ての文字がアスタリスクのウェブフォントを作って利用するのはいかがでしょうか。

Comments

[..o]

ご回答ありがとうございます。
やはり変えられないのですね、
ウェブフォント検討してみます。