CSS -webkit-text-security プロパティ
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
-webkit-text-security は標準外の CSS プロパティで、<form> フィールド（<input> や <textarea> など）内の文字を、図形に置き換えることで非表示にします。このプロパティは、type=password ではないフィールドにのみ影響します。
構文
css
-webkit-text-security: circle;
-webkit-text-security: disc;
-webkit-text-security: square;
-webkit-text-security: none;
/* グローバル値 */
-webkit-text-security: inherit;
-webkit-text-security: initial;
-webkit-text-security: revert;
-webkit-text-security: revert-layer;
-webkit-text-security: unset;
形式文法
-webkit-text-security =
circle |
disc |
square |
none
例
テキスト入力の非表示
下記の入力欄に文字を入力してみてください。ブラウザーがこのプロパティに対応している場合、入力した文字が視覚的に四角に置き換わります。
HTML
html
<label for="name">名前:</label> <input type="text" name="name" id="name" />
CSS
css
input {
-webkit-text-security: square;
}
結果
仕様書
どの標準にも含まれていません。