在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;
}

这是结果：

我认为有一个内部css设置，在某处，在webkits修改密码点的形状。如何摆脱它，并在每个浏览器上都有相同的风格？

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

这就是取代传统middot。
我尝试将它设置为圆形或无，但我不能得到类似于其他浏览器显示的东西。

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

推荐答案

设置输入[type =password] {font：small-caption; font-size：16px}

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

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