How to fix hidden characters in password inputs in old IE

I came across an interesting bug recently where, in Internet Explorer (versions 6-8), the bullet characters for an input[type="password"] were not showing up. I could see the cursor moving as if text was being entered but no result was being shown.

After many attempts to remedy this, I finally figured out the issue was with the font being used in this field. For some reason, the bullet character that is usually used could not be used by IE, even though it’s actually present in the font and my font-stack provided a good few alternatives just in case there might be any issues. So, I added one simple rule to my CSS and it fixed the issue:

input[type='password'] {
  font-family: sans-serif;
}

I will be adding this to all projects from now on, and I recommend you do as well.

Here’s an example:

See the Pen IE hidden characters in password fields by Zander Martineau (@mrmartineau) on CodePen.