使输入 type=text 看起来像 type=password

tl;dr

我有一个输入type=text我想像输入一样显示星星type=password仅使用CSS。

基本上我有一个包含以下输入的表单：

<input type='text' value='hello' id='cake' />

我没有生成表单，我根本无法访问其 HTML。不过，我确实可以访问应用于该页面的 CSS。

我想要的是让它表现得像type=password，即 - 显示用户输入的内容而不是实际输入的文本。基本上，我希望这个方面（用户输入的呈现）看起来像type=password field.

由于这似乎只是一个演示问题，我认为必须有一种方法可以使用 CSS 来做到这一点，因为它在其职责范围内。然而——我还没有找到这样的方法。我必须支持 IE8+，但我宁愿有一个仅适用于现代浏览器的解决方案，而不是根本没有解决方案。防止复制/粘贴功能的额外要点，但我可以没有它。

Note:如果不清楚，我无法将 HTML 或 JavaScript 添加到页面 - 只能添加 CSS。

（我唯一发现的是这个问题 https://stackoverflow.com/q/17151252/1348195但它正在处理 jQuery 相关问题，并且有一个 JavaScript 解决方案）

有一个实验性 CSS 选择器，名为-webkit-text-security https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security (or text-security):

input.pw
{
    -webkit-text-security: disc;
    text-security: disc;
}

It's 目前支持 https://caniuse.com/?search=text-security由 Chrome、Edge 和 Safari 提供。但是，Firefox 尚不支持它，因此不应该在生产中使用它。

目前，一种不错的解决方法是使用网络字体。您可以使用任何字体编辑实用程序，例如字体锻造 http://fontforge.org/创建一个包含所有字符的字体*（或您想要的任何符号）。然后使用 CSS Web 字体将它们用作自定义字体。