在 CSS 中样式化密码字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6859727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling Password Fields in CSS
提问by Tommaso Belluzzo
I'm experiencing a minor issue with fonts in my stylesheet.
我的样式表中的字体出现了一个小问题。
This is my 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;
}
And this is the result:
这是结果：
I think there is an internal css setting, somewhere, on webkits that modify the shape of the password dots. How can I get rid of it and have the same style on every browser?
我认为在 webkit 的某处有一个内部 css 设置可以修改密码点的形状。我怎样才能摆脱它并在每个浏览器上拥有相同的风格？
Thanks!
谢谢！
EDIT: I just found something curious: by default, webkit browsers apply this CSS to password fields:
编辑：我刚刚发现了一些奇怪的东西：默认情况下，webkit 浏览器将此 CSS 应用于密码字段：
input[type="password"]
{
-webkit-text-security: disc;
}
And that's what is replacing the classic middot. I tried setting it to circle or none, but I cannot get something similar to what is shown by other browsers.
这就是取代经典middot的东西。我尝试将其设置为圆形或无，但无法获得与其他浏览器显示的内容类似的内容。
EDIT: I FOUND A SOLUTION. If you are using "Lucida Sans Unicode" font for your website, that's the problem! The only font that emulate correctly the password field's big dots of other browsers is Verdana, mixed with a little bit of letter spacing. So, for both Opera and Webkit, use the following code to fix it:
编辑：我找到了一个解决方案。如果您的网站使用的是“Lucida Sans Unicode”字体，那就是问题所在！唯一正确模拟其他浏览器密码字段大点的字体是 Verdana，混合了一点字母间距。因此，对于 Opera 和 Webkit，请使用以下代码进行修复：
.opera input[type="password"],
.webkit input[type="password"]
{
font: large Verdana,sans-serif;
letter-spacing: 1px;
}
采纳答案by Sotiris
The best I can find is to set input[type="password"] {font:small-caption;font-size:16px}
我能找到的最好的是设置 input[type="password"] {font:small-caption;font-size:16px}
回答by Timo Türschmann
The problem is that (as of 2016), for the password field, Firefox and Internet Explorer use the character "Black Circle" (●), which uses the Unicode code point 25CF, but Chrome uses the character "Bullet" (?), which uses the Unicode code point 2022.
问题是（截至 2016 年），对于密码字段，Firefox 和 Internet Explorer 使用字符“Black Circle”（●），它使用 Unicode 代码点25CF，但 Chrome 使用字符“Bullet”（？），哪个使用 Unicode 代码点2022。
As you can see, even in the StackOverflow font the two characters have different sizes.
如您所见，即使在 StackOverflow 字体中，这两个字符的大小也不同。
The font you're using, "Lucida Sans Unicode", has an even greater disparity between the sizes of these two characters, leading to you noticing the difference.
您使用的字体“Lucida Sans Unicode”在这两个字符的大小之间具有更大的差异，导致您注意到差异。
The simple solution is to use a font in which both characters have similar sizes.
简单的解决方案是使用两个字符具有相似大小的字体。
The fix could thus be to use a default font of the browser, which should render the characters in the password field just fine:
因此，修复可能是使用浏览器的默认字体，它应该可以很好地呈现密码字段中的字符：
input[type="password"] {
font-family: caption;
}
回答by Aleksandr Zidyganov
When I needed to create similar dots in input[password] I use a custom font in base64 (with 2 glyphs see above 25CF and 2022)
当我需要在输入 [password] 中创建类似的点时，我使用 base64 中的自定义字体（有 2 个字形，见上文 25CF 和 2022）
SCSS styles
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;
}
After that, I got identical display input[password]
之后，我得到了相同的显示输入 [密码]
回答by Volomike
I found I could improve the situation a little with CSS dedicated to Webkit (Safari, Chrome). However, I had to set a fixed width and height on the field because the font change will resize the field.
我发现使用专用于 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 */
