CSS のみを使用してアスタリスクを含むパスワードのような入力を作成する方法

スタイル入力タイプ=テキスト タイプ=パスワード

質問:

どうすればいいですか? type=text の入力要素を変更して、CSS のみを使用してパスワード入力のようにアスタリスクを表示しますか?

解決策:

この問題はプレゼンテーションのみの性質にもかかわらず、CSS最近のブラウザでは、単独でこの効果を実現できます:

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

この CSS をクラス "pw" の入力要素に適用します:

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

<!-- Button to toggle asterisk display -->
<button onclick="this.previousElementSibling.classList.toggle('pw')">Toggle '•'</button></code>

以上がCSS のみを使用してアスタリスクを含むパスワードのような入力を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。