在 CSS 中设置密码字段的样式答案

【问题标题】：Styling Password Fields in CSS在 CSS 中设置密码字段的样式
【发布时间】：2011-10-15 03:23:36
【问题描述】：

我的样式表中的字体遇到了一个小问题。

这是我的 CSS：

body
{
  ...
  font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}

#wrapper_page
{
  ...
  font-size: 1.2em;
}

input, select, textarea
{
  ...
  font: bold 100% "Lucida Sans Unicode",sans-serif;
}

结果如下：

我认为在 webkits 的某个地方有一个内部 css 设置可以修改密码点的形状。如何摆脱它并在每个浏览器上保持相同的样式？

谢谢！

编辑：我刚刚发现了一些奇怪的东西：默认情况下，webkit 浏览器将此 CSS 应用于密码字段：

input[type="password"]
{
  -webkit-text-security: disc;
}

这就是取代经典中点的原因。我尝试将其设置为圆形或无，但我无法获得类似于其他浏览器显示的内容。

编辑：我找到了解决方案。如果您的网站使用“Lucida Sans Unicode”字体，那就是问题所在！唯一能正确模拟其他浏览器密码字段大点的字体是 Verdana，混合了一点字母间距。因此，对于 Opera 和 Webkit，请使用以下代码来修复它：

.opera input[type="password"],
.webkit input[type="password"]
{
  font: large Verdana,sans-serif;
  letter-spacing: 1px;
 }

【问题讨论】：

只使用纯文本输入框。
Ehtesham，您是否费心阅读其他 cmets？
不，我没有使用任何类型的 CSS 重置。这是一个简单的输入：body -> #wrapper_page ->
请不要在问题中发布解决方案，并用愚蠢的标签编辑标题。将其发布为答案并将其标记为已接受。这就是它在问答网站上的工作方式:)
这个人真烦人，哈哈！刚遇到同样的问题，将字体设置为 Verdana 就完美了！

标签： css forms input fonts stylesheet

【解决方案1】：

我能找到的最好的方法是设置input[type="password"] {font:small-caption;font-size:16px}

演示：

input {
  font: small-caption;
  font-size: 16px;
}

&lt;input type="password"&gt;

【讨论】：

@Zarathos 你可以使用任何你觉得更好的东西。事实是，从隐藏角色的那一刻起，并没有太大的区别。

【解决方案2】：

当我需要在 input[password] 中创建类似的点时，我使用 base64 中的自定义字体（有 2 个字形，请参见上面的 25CF 和 2022）

之后，我得到了相同的显示输入[密码]

@font-face {
  font-family: 'pass';
  font-style: normal;
  font-weight: 400;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format('woff');
}

input[type=password]:not(:placeholder-shown) {
  font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif;
}

<form action="#">
<input type="password" placeholder="Your password" />
<br>
<br>
<input type="password" placeholder="Repean your password" />
</form>

【讨论】：

不错的解决方案！此外，您只能选择input[type=password]:not(:placeholder-shown) 选择器输入的密码的“点”版本。有时不需要触摸占位符

【解决方案3】：

问题在于（截至 2016 年），对于密码字段，Firefox 和 Internet Explorer 使用字符“Black Circle”（●），它使用 Unicode 代码点 25CF，但 Chrome 使用字符“Bullet " (•)，它使用 Unicode 代码点 2022。

如您所见，即使在 StackOverflow 字体中，这两个字符也有不同的大小。

您使用的字体“Lucida Sans Unicode”在这两个字符的大小之间存在更大的差异，导致您注意到差异。

简单的解决方案是使用两个字符大小相似的字体。

因此，解决方法可能是使用浏览器的默认字体，它应该可以很好地呈现密码字段中的字符：

input[type="password"] {
    font-family: caption;
}

【讨论】：

【解决方案4】：

我发现我可以使用专门用于 Webkit（Safari、Chrome）的 CSS 来稍微改善这种情况。但是，我必须在字段上设置固定的宽度和高度，因为字体更改会调整字段的大小。

@media screen and (-webkit-min-device-pixel-ratio:0){ /* START WEBKIT */
  INPUT[type="password"]{
  font-family:Verdana,sans-serif;
  height:28px;
  font-size:19px;
  width:223px;
  padding:5px;
  }
} /* END WEBKIT */

【讨论】：

【解决方案5】：

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 
0.001dpcm) {    
.chrome {
property: value;
}
.register-password input[type="password"]:not(:placeholder-shown) {
font-family: "pass";
font-size: 30px;
 }
}

@-moz-document url-prefix() {
.register-password input[type="password"]:not(:placeholder-shown) {
font-family: "pass";
font-size: 18px;
 }
}

这对我来说是在 Firefox 开发者版和 chrome 中获得相同大小的密码点。

【讨论】：