Styling Password Fields in CSS

user_796085 0
Viewed 190684

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

This is my 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:

browser password fields

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?

Thanks!

EDIT: 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.

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: 

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

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.

As you can see, even in the StackOverflow font the two characters have different sizes.

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.

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;
}
user_18054390 
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 
0.001dpcm) {    
.chrome {
property: value;
}
.register-password input[type="password"]:not(:placeholder-shown) {
font-family: "pass";
font-size: 30px;
 }
}

@-moz-document url-prefix() {
.register-password input[type="password"]:not(:placeholder-shown) {
font-family: "pass";
font-size: 18px;
 }
}

This worked for me to get the same size on the password dots in firefox developer edition and chrome.

user_173685090
Related