在 CSS 中设置密码字段的样式 [英] Styling Password Fields in CSS

问题描述

我的样式表中的字体出现了一个小问题.

I'm experiencing a minor issue with fonts in my stylesheet.

这是我的 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 设置可以修改密码点的形状.我怎样才能摆脱它并在每个浏览器上拥有相同的样式?

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 应用于密码字段:

I just found something curious: by default, webkit browsers apply this CSS to password fields:

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.

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

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:

.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}

The best I can find is to set input[type="password"] {font:small-caption;font-size:16px}

演示:

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

<input type="password">

这篇关于在 CSS 中设置密码字段的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！