I'm trying to replace the bullet characters in a password field with emojis.

Desired Unicode output

Any ideas on where to start looking to achieve this would be helpful

I'm trying to replace the bullet characters in a password field with emojis.

Desired Unicode output http://apps.timwhitlock.info/emoji/tables/unicode

Any ideas on where to start looking to achieve this would be helpful

• javascript
• unicode
• passwords

• 3 possible duplicate of change password char in HTML – Muhammad Abdul-Rahim Commented Aug 24, 2015 at 16:57
• you can use a masking text field that feeds into a library like angularjs or ember (to get text as it's typed) and for each character rather than outputting the text, you output an image. you'd have to really refine the process but that's a step in the right direction. – iam-decoder Commented Aug 24, 2015 at 17:01
• Thanks @Mari, although that post still doesn't answer the question with the 'This can't be done' response – Rob Commented Aug 24, 2015 at 17:14

2 Answers 2

I figured out how to change the bullet icon in Webkit browsers.

Essentially, you use a custom font (demo).

• Go to Fontello, or equivalent site.
• Choose or upload an icon.
• Select "Customize Codes" tab.
• Change the glyph destination to U+"2022" to replace the bullet symbol.
• Download webfont.

• Include the font files on your site, and include the following css (Note, the 0000 will change depending on the glyph & glyph destination)

  /* Use the css below to change the password input symbol */
  @font-face {
    font-family: 'fontello';
    src: url('./font/fontello.eot?0000');
    src: url('./font/fontello.eot?0000#iefix') format('embedded-opentype'),
    url('./font/fontello.woff?0000') format('woff'),
    url('./font/fontello.ttf?0000') format('truetype'),
    url('./font/fontello.svg?0000#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  
  input[type="password"] {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
  
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
  
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Unment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  
    /* add spacing to better separate each image */
    letter-spacing: 2px;
  }
  

The full instructions with screenshots are here.

From what I could find, this isn't a good idea. Since the browser renders these natively, if you build a JavaScript workaround you'll likely promise the security, break autopletion, etc.

Found from here: change password char in HTML.

Although this is different than what you're wanting to do, here's someone who is doing some basic CSS styling on the password input field. Sorry it's not as awesome as what you're trying to do: Styling Password Fields in CSS.