Styling Password Fields in CSS

Question

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

No, I'm not using any kind of CSS reset. This is a simple input: body -> #wrapper_page -> <input id="password" type="password"/> — Tommaso Belluzzo
– Tommaso Belluzzo, Commented Jul 28, 2011 at 13:39
Please don't post the solution in the question and edit the title with a silly tag. Post it as an answer and mark it accepted. That's how it works here on a Q&A site :) — BalusC
– BalusC, Commented Jul 29, 2011 at 2:50
Man that was so annoying lol! Just encountered the same problem, setting the font to Verdana works perfect cheers! — Notorious
– Notorious, Commented Sep 11, 2017 at 22:27

Ruslan López · Accepted Answer · 2020-05-31 17:39:24Z

45

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

Demo:

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

<input type="password">

edited May 31, 2020 at 17:39

Ruslan López

4,4752 gold badges30 silver badges40 bronze badges

answered Jul 28, 2011 at 13:53

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sotiris Over a year ago

@Zarathos you can use anything you find better. The truth is that from the moment that characters are hidden there is no big difference.

smearumi · Accepted Answer · 2023-09-18 02:16:23Z

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)

After that, I got identical display input[password]

@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="Repeat password" />
</form>

Nice solution! In addition you can select only the "dots" version of the password input by input[type=password]:not(:placeholder-shown) selector. Sometimes there is no need to touch placeholders

Timo Türschmann · Accepted Answer · 2016-10-19 11:50:06Z

16

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

edited Oct 19, 2016 at 11:50

answered Oct 19, 2016 at 11:41

Timo Türschmann

4,7963 gold badges26 silver badges31 bronze badges

Comments

Volomike · Accepted Answer · 2012-04-28 12:57:05Z

3

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.

@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 */

answered Apr 28, 2012 at 12:57

Volomike

25k23 gold badges128 silver badges220 bronze badges

Comments

Emil Backlund · Accepted Answer · 2021-11-09 14:50:14Z

1

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

answered Nov 9, 2021 at 14:50

Emil Backlund

111 bronze badge

Collectives™ on Stack Overflow

Styling Password Fields in CSS

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related