IE8 password input field displays square characters

Ever seen this when testing a website in IE8… Instead of the usual obfuscation using dots or stars, you see a square/rectangular symbol which usually shows up when the browser doesn’t have the entity available to display. The usual reason is that there is a custom font or webfont in use on the fields.

The solution

Override the password input element with a font that is more likely to be available, such as Arial, Helvetica or Times:

input[type="password"] {
  font-family: Helvetica, Arial, sans-serif;
}

Browser compatibility

Internet Explorer has perfect support for [this] down to version 7, but zero support in 6.

The Skinny on CSS Attribute Selectors – CSS Tricks

Posted by Emma Sax

August 2, 2013

CSS