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

Question

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

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

这就是结果:

我认为在某个地方有一个内部css设置,用于修改密码点形状的webkits.我怎样才能摆脱它并在每个浏览器上拥有相同的风格？

谢谢!

编辑:我刚发现一些奇怪的东西:默认情况下,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;
 }

Answer 1

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

演示: http ://jsfiddle.net/x5CCf/

Answer 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>

Answer 3

问题是(截至2016年),对于密码字段,Firefox和Internet Explorer使用字符"Black Circle"(●),它使用Unicode代码点25CF,但Chrome使用字符"Bullet"(•),使用Unicode代码点2022.

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

您使用的字体"Lucida Sans Unicode"在这两个字符的大小之间存在更大的差异,从而导致您注意到差异.

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

因此,修复可能是使用浏览器的默认字体,它应该在密码字段中呈现字符:

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