-webkit-text-security CSS property
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
-webkit-text-security is a non-standard CSS property that obfuscates characters in a <form> field (such as <input> or <textarea>) by replacing them with a shape. It only affects fields that are not of type=password.
Syntax
css
-webkit-text-security: circle;
-webkit-text-security: disc;
-webkit-text-security: square;
-webkit-text-security: none;
/* Global values */
-webkit-text-security: inherit;
-webkit-text-security: initial;
-webkit-text-security: revert;
-webkit-text-security: revert-layer;
-webkit-text-security: unset;
Formal syntax
-webkit-text-security =
circle |
disc |
square |
none
Examples
Obscuring a text input
Try typing in the field below. If your browser supports this property, the characters should be visually replaced with squares.
HTML
html
<label for="name">Name:</label> <input type="text" name="name" id="name" />
CSS
css
input {
-webkit-text-security: square;
}
Result
Specifications
Not part of any standard.
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
-webkit-text-security
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Non-standard. Check cross-browser support before using.