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

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

这是我的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;
}

这就是结果：

我认为在WebKit的某个地方有一个内部css设置，可以修改密码点的形状。我怎样才能摆脱它，在每个浏览器上都有相同的风格

谢谢

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

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

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

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

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

---

我能找到的最好方法是设置

input[type=“password”]{font:small-caption；font-size:16px}

演示：

输入{
字体：小标题；
字体大小：16px；
}

---

我发现我可以用专门用于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 */

问题在于（截至2016年），对于密码字段，Firefox和Internet Explorer使用“黑圈”字符(●), 它使用Unicode代码点

25CF

，但Chrome使用字符“Bullet”（•），它使用Unicode代码点

2022

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

您使用的字体“Lucida Sans Unicode”在这两个字符的大小之间有更大的差异，这让您注意到了差异

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

因此，修复方法可能是使用浏览器的默认字体，这将使“密码”字段中的字符显示得很好：

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

---

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

SCSS样式

@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.password {
  font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif ;
  font-size: 18px;
  &::-webkit-input-placeholder {
    transform: scale(0.77);
    transform-origin: 0 50%;
  }
  &::-moz-placeholder {
    font-size: 14px;
    opacity: 1;
  }
  &:-ms-input-placeholder {
    font-size: 14px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
  }

---

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

只使用纯文本输入框。埃特沙姆，你有没有阅读其他评论？没有，我没有使用任何CSS重置。这是一个简单的输入：body->wrapper\u page->请不要在问题中发布解决方案，并用一个愚蠢的标签编辑标题。将其作为答案发布，并将其标记为已接受。这就是它在网站上的工作方式问与答网站：）男人，这是如此令人讨厌的笑！刚刚遇到了同样的问题，将字体设置为Verdana效果非常好，干杯@Zarathos你可以用任何你觉得更好的东西。事实是，从隐藏角色的那一刻起，就没有什么大的区别。