Replace the input password bullet
From the beginning, password type inputs have displayed a small dot (bullet symbol) instead of the actual characters to maintain some semblance of security.
While you can alter non-password type inputs to use bullets (webkit only), changing the password type bullet is a bit more complicated.
Back in 2015, I found a method that allowed you to alter the bullet symbol, but only in webkit browsers. I recently revisited this work and discovered that a minor modification would allow this method to work in Firefox & Microsoft Edge browsers. So, let’s get started!
First, we need an icon font generator site. I’m using Fontello in this example; but any site that allows you to choose an icon and customize the font code will work.
Choose two different icons. If you want to use the same icon in all browsers, you will probably need — meaning I didn’t test it — to add a duplicate of the icon into the “Custom Icons” section. This is necessary because Fontello only allows assigning one custom code per icon.
Now select the “Customize Codes” tab.
For the icon targeting webkit browsers, set the destination code to U+2022. This is the unicode hexadecimal value for a bullet.
For Firefox and MS Edge browsers, set the destination code to U+25CF. This is the unicode hexadecimal value for a black circle.
Now download the webfont.
We’re going to use all the fonts in the font folder. And only the css from fontello.css. The CSS needs to be modified because only the password input will be using the font.
In the snippet above, the 0000 in the url is a placeholder. It will change depending on the selected Fontello icons and the destination code. You can copy the CSS above, but you’ll need to keep the @font-face block from the file. The [class^="icon-"]:before, [class*=" icon-"]:before selectors were replaced with input[type="password"]. And the last two definitions that include a content definition were removed since we’re only targeting an input.
Include your CSS and a password input in your HTML and you’re done! Your password inputs will now show the custom icon instead of that plain old bullet that was there before.
If you want to see it working, check out the demo, then check out the demo code on GitHub.