html - 获取输入 type=text 看起来像 type=password

Question

tl;博士

我有一个带有 type=text 的输入，我想仅使用 CSS 将星星显示为带有 type=password 的输入。

---

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

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

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

我想要的是它的行为类似于 type=password ，即 - 为用户键入的内容而不是实际键入的文本显示星号。基本上，我希望那个方面(用户输入的表示)看起来像一个 type=password 字段。

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

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

---

(我唯一找到的是 this question，但它正在处理与 jQuery 相关的问题并且它有一个 JavaScript 解决方案)

Answer 1

正如@ThiefMaster 所建议的那样

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

然而，这将适用于 webkit 后代的浏览器。Opera、Chrome 和 Safari，但对其余浏览器的支持不多，另一种解决方案是使用 webfonts。

使用任何字体编辑实用程序，如 FontForge创建一个所有字符都为 * (或任何您想要的符号)的字体。然后使用 CSS 网络字体将它们用作自定义字体。