1

I've applied css -webkit-text-security: disc; to mask the word as password, but it does not work in Internet Explorer.

Here is my code:

.hide{
-webkit-text-security:disc;
}
<h1 class="hide">HideMe</h1>

It is working on chrome but not in IE. Please give me the solution. Thank you.

Mohini
  • 268
  • 3
  • 15

1 Answers1

3

-webkit- is a vendor prefix:

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. Developers should wait to include the unprefixed property until browser behavior is standardized.

… used by the webkit rendering engine which is not used by Internet Explorer.

It is so experimental that it doesn't even appear in draft CSS specs. No other browser supports it, or a version of it with a different vendor prefix.

If you want to get that effect, you'll need to apply JavaScript (e.g. by using an invisible password field overlaid on an element for which you add bullet characters based on the length of the value of the input each time the input event fires.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I'll laugh if this property appears in the WebKit compat spec eventually. ([Not that IE is going to receive any new -webkit- properties](https://stackoverflow.com/questions/35184048/what-is-after-internet-explorer-11-on-windows-7-how-well-will-es2016-be-support), but Edge almost certainly will if that happens.) – BoltClock Oct 31 '18 at 10:21
  • Some additional information: -webkit-text-security has been around since Safari 3, released the same year as the original iPhone. It's probably well and stable by now, but merely proprietary to Safari. And the feature was last mentioned at a CSSWG F2F [in April](https://lists.w3.org/Archives/Public/www-style/2018May/0031.html). – BoltClock Oct 31 '18 at 10:28