表情符号在输入文本上

Question

我试图用emojis替换密码字段中的项目符号字符。

所需的Unicode输出 http://apps.timwhitlock.info/emoji/tables/unicode

任何关于从哪里开始寻求实现这一目标的想法都会有所帮助

Answer 1

我想出了如何更改 Webkit浏览器中的项目符号图标。

基本上，您使用自定义字体（demo）。

• 转到Fontello或同等网站。
• 选择或上传图标。
• 选择＆＃34;自定义代码＆＃34;标签。
• 将字形目标更改为U +＆＃34; 2022＆＃34;替换子弹符号。
• 下载webfont。

• 在您的网站上包含字体文件，并包含以下css（注意，0000将根据字形和字形目标而改变）

  /* 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;
  }
  

full instructions with screenshots are here。

Answer 2

从我能找到的，这不是一个好主意。由于浏览器本地呈现这些内容，如果您构建JavaScript解决方法，您可能会破坏安全性，中断自动完成等。

从这里找到：change password char in HTML。

虽然这与你想要做的不同，但是这里有人在密码输入字段上做了一些基本的CSS样式。对不起，它并不像你想做的那样棒极了：Styling Password Fields in CSS。