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

User · Accepted Answer

The best I can find is to set input type  password    font small-caption font-size 16px   Demo    x000D   x000D  input   x000D    font  small-caption  x000D    font-size  16px  x000D    x000D   lt input type  password  gt  x000D   x000D   x000D

User · Answer

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   SCSS styles   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     amp   -webkit-input-placeholder       transform  scale 0 77       transform-origin  0 50          amp   -moz-placeholder       font-size  14px      opacity  1         amp  -ms-input-placeholder       font-size  14px      font-family   Roboto   Helvetica  Arial  sans-serif        After that  I got identical display input password

User · Answer

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

User · Answer

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

[css] Styling Password Fields in CSS

Examples related to css

Examples related to forms

Examples related to input

Examples related to fonts

Examples related to stylesheet