代码片段 → CSS → 让非密码输入使用项目符号（或项目符号替代方案） 让非密码输入使用项目符号（或项目符号替代方案） Chris Coyier 于 2011年8月22日 这适用于文本输入（例如文本、电子邮件等），但您无法更改实际的密码输入。用例 = ???。 input { -webkit-text-security: none; } input { -webkit-text-security: circle; } input { -webkit-text-security: square; } input { -webkit-text-security: disc; /* Default */ }
嗨，Chris，
我认为作者无法真正使用它，因为我认为 WebKit 不允许您覆盖 input type=”password” 的样式。
但它有效，查看参考 URL。
它不起作用。
正如 Stephanie Sullivan 指出的那样，“password” 后面的“/”使浏览器将其视为“text”。
<p><input type=password /></p>
修复示例中的标记，您会发现它停止工作。
嗯，很有趣。这是一个简化的示例
http://jsfiddle.net/chriscoyier/8WpNg/52/
我没有更改标记，因为
<input type=password />是完全有效的。它不会将类型更改为文本，只是不允许您更改样式。它以某种方式被锁定。我将更改代码片段以说明它仅适用于文本（ish）输入。（我在 type=email 上尝试过，它在那里有效）。
我们认为是其中的“/”以某种方式改变了事情，因为如果我记得没错，删除它会显示不同的行为。
但现在当我尝试参考 URL 时，我无法重现该行为！??
您是否曾经在 type=password 的输入上看到它工作？我以为它曾经是……
无论如何，正如我在我的第一篇文章中建议的那样，并且正如 Tab Atkins 确认的那样，没有办法覆盖它 :-(
我想知道这背后的用例是什么，更改默认密码项目符号感觉会让很多用户感到困惑。
您可以进入 Chrome 中的“检查元素”并将其从“disc”更改为“none”，它将显示实际的字母。那么，这有什么用呢？
当您设置某人的密码时。例如在无线接入点上键入密码。
嗨，
我试图将密码输入字符更改为正方形，但没有成功。我尝试查找它，但找不到任何说明如何执行此操作的资源。
谢谢，
Daniel
webkit-text-security 的一个用途是在 iOS 和 Android 上创建使用原生数字键盘而不是字母数字键盘的 PIN 码输入。基本上：将为您提供数字键盘，设置 webkit-text-security 将为您提供隐藏条目！我还使用 autocomplete=’off’ 来确保 PIN 不会自动填充。
意思是说 – 基本上：
<input type='tel'>将为您提供数字键盘……您好，Kinergy。这正是我试图实现的目标，但它不起作用。
目前我的输入如下
<input type=”tel” name=”myInput” id=”myInputID”/>
以及 CSS 如下
input[type=”tel”]{
-webkit-text-security: disc;
}
我尝试过内联和特定类，但两者都不起作用。我正在使用 Android ICS。关于您如何使其工作有任何提示 :-)
最后我编写了 Javascript 来获取来自 tel 输入字段的输入并将其替换为星号，看起来就像密码输入，但使用数字软键盘。想知道为什么 CSS 不起作用。
嗨，Martin，
似乎第三方键盘不遵守此规则 - 我尝试使用 Swype 键盘，但它不起作用，但它确实适用于标准 Android 键盘！
也许这就是它对您不起作用的原因？
干杯
当然，就像您的网站一样，但是您必须检查几篇帖子中的拼写。
其中许多都充斥着拼写错误，我发现告知现实非常
令人烦恼，但我一定会再次
再来一次。
它支持 Chrome、Safari。如何为其他浏览器执行此操作。
感谢您的快速提示，我在 type=’password’ 方面遇到问题，这确实让我免于重写我的 CSS 的很大一部分。
顺便说一句，在示例中，-webkit-text-security: disc 和 circle 之间似乎没有区别，我错过了什么吗？我使用的是最新版本的 Chrome。
嗨，
我正在跨平台工作，我开发了一个单一代码库并在所有其他平台（如 Android、iOS、Windows 和 Blackberry）上运行它。
我使用 -webkit-text-security: disc; 将输入替换为圆盘，它仅在少数设备上有效，并且不支持所有平台（Windows Phone 8 和 Android S2）。一旦我对它进行了研究，我就知道这是因为 WebKit 仅支持少数浏览器。所以请帮助我解决这个问题。
提前致谢。
嗨，
我在我的应用程序中使用 jsf 输入文本字段，这应该在桌面和移动设备上使用。在移动设备上单击文本字段时，它应该启用数字键盘。任何人都可以帮我解决这个问题吗？
嗨，
任何人都可以帮我解决这个问题。
我正在搜索 FF 的 -webkit-text-stroke 等效项。
你好
我在 PhoneGap 的移动应用程序中使用了它。但它在某些 Android 版本中不起作用。有人可以帮忙吗？
它在索尼 Xperia (4.0.4) 和三星 Duos (4.2.2) 上不起作用。
你好
我需要非密码字段的项目符号。代码在 Chrome 中运行良好，但在 Firefox 中不起作用。
任何帮助将不胜感激。
同样的问题。-webkit 属性仅在 Chrome 中有效。其他浏览器不支持。我们如何实现？
我感到困惑……我只是问了一个问题……这个 webkit-text-security……让密码变成这样 **************……这些星号？
感谢您发布此内容。它帮助了我正在进行的一个 Cordova 项目。
用例：双盲输入。一对输入，要求在两个输入中输入完全相同的文本。如果它们不匹配，则输入将被清除（就像它们没有输入任何内容一样）。
您可能认为这仅限于密码，但它也有助于输入社交信息、出生日期等以进行用户识别。
这很有效.. 但我们在 iPhone 上遇到了问题。在礼品卡 PIN 码中输入值时，iPhone 会将其视为密码字段，并询问我们是否要保存它。
注意：以上 CSS 应用于礼品卡的 PIN 码字段。问题出现在 iOS 10 Safari 中。
所以这里有一些糟糕的建议，出于很多原因，最重要的是，这对无障碍性不利。但是，为了科学，这里有一种方法可以拥有一个密码字段……它不是密码字段。
https://jsfiddle.net/qaddgf7x/
@Jared
我尝试了你的代码 https://jsfiddle.net/qaddgf7x/
使用
Chrome 版本 61.0.3163.100 – 工作正常 :)
Opera 48.0.2685.35 – 工作正常 :)
IE 11.0.9600.16428 – 密码文本显示为可读 :(
FireFox 55.0.3 – 密码文本显示为可读 :(
你知道为什么会这样吗？
谢谢
更多信息
iMac 运行 Safari 10.1.2 – 工作正常 :)
原因是并非所有浏览器都使用 WebKit。使用 WebKit 的浏览器按预期工作。不使用的浏览器默认为纯文本。
你找到解决这个问题的方法了吗？
使用单字符字体隐藏输入文本的跨平台解决方案。
https://github.com/noppa/text-security
查看 https://github.com/Mottie/input-password-bullet。它使用图标字体替换项目符号。因此可以使用任何图标！
需要注意的是，这些方法都不安全。我正在研究这个问题的解决方案，找到后会分享。
永远记住……
那个 -webkit-* 表示支持 WebKit 的浏览器（例如 Firefox 不支持）。
用户可以使用所有这些答案检查元素并查看输入的真实值。
因此，如果您使用的是 Chrome，并且只想对偷窥用户肩膀的人隐藏输入值，那么 -webkit-text-security: square; 就足够了，但如果您确实需要安全性，那么这些方法都无效……不幸的是。
唯一的真正答案将涉及 JavaScript。实际上，我们可能需要获取用户输入，将其存储在一个与表单模型关联的变量中，然后将其转换为其他字符（如星号 *），并用模糊变量的值替换输入值。这当然需要在 keyup 上完成。
遗憾的是，我的潜在解决方案很可能难以实现。我将在编写代码并有机会在 IE 和 Edge 上进行适当测试后进行更新。
我共享的 input-password-bullet 示例是安全的，因为它替换了密码类型输入的字体，就像任何典型的密码类型输入一样安全。
@kevin Smothers，值得注意的是，虽然您某种程度上是正确的（取决于此字段的目标/用途），但从技术上讲，type=”password” 字段也并不安全。因为人们可以检查元素，并将类型更改为“文本”，所以实际上，webkit-text-security 与它试图模仿的默认密码字段一样安全，只要您为不支持的浏览器添加了回退。
一个用例是防止浏览器提示用户是否要保存密码。现代浏览器没有办法抑制提示，并且此解决方案在 Chrome（以及可能的其他 WebKit 浏览器）中有效，但在 IE/Edge/Firefox 中无效……。
为什么你不希望浏览器保存密码？一个用例是，如果我正在上传 PDF 以进行处理，并输入 PDF 的密码（如果有），则保存这些密码没有价值。如果我上传了十几个带有密码的 PDF，我们也不希望浏览器预填充密码字段。
我们有一个 PIN 码输入，它在一段时间后会阻止我们的应用程序。用户输入 PIN 码以更快地重新进行身份验证。
当对 PIN 码使用密码字段时，浏览器（如果已启用）会尝试自动填充密码并将用户名放入另一个可用字段中，在我们的案例中是搜索字段。这是不希望的。
现在，当我将 PIN 码字段的类型设置为文本并使用 -webkit-text-security: disc 时，浏览器不会用用户名自动填充搜索字段。问题解决。
（autofill='off' 在 Chrome 中不起作用）
这在 Firefox 中不起作用 :(