Emojis on input text

Question

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

Answer 1

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;
    /* Uncomment 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.

Answer 2

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 compromise the security, break autocompletion, 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.