title | slug | page-type | status | browser-compat | |
---|---|---|---|---|---|
-webkit-text-security |
Web/CSS/-webkit-text-security |
css-property |
|
css.properties.-webkit-text-security |
{{CSSRef}}{{Non-standard_Header}}
-webkit-text-security
is a non-standard CSS property that obfuscates characters in a {{HtmlElement("form")}} field (such as {{HtmlElement("input")}} or {{HtmlElement("textarea")}}) by replacing them with a shape. It only affects fields that are not of type=password
.
-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;
-webkit-text-security = circle | disc | square | none
Try typing in the field below. If your browser supports this property, the characters should be visually replaced with squares.
<label for="name">Name:</label> <input type="text" name="name" id="name" />
input {
-webkit-text-security: square;
}
{{EmbedLiveSample("Obscuring_a_text_input")}}
Not part of any standard.
{{Compat}}