你遇到的问题其实是因为-webkit-text-security属性的合法取值里并没有asterisk，它仅支持disc（默认圆点）、circle（空心圆）、square（方块）这三个值，所以替换成asterisk自然不会生效。下面给你几个可行的解决办法：

方法1：使用自定义字体（推荐，无JS依赖） #

我们可以创建一个自定义字体，将默认的密码圆点（Unicode字符•，U+2022）映射为星号*，然后把这个字体应用到密码输入框上。

步骤： #

1. 生成自定义字体：
   你可以用在线字体生成工具，创建一个只包含•字符的字体，将其字形替换为星号的形状，导出为WOFF/WOFF2格式的字体文件。
2. 在CSS中引入并应用字体：

@font-face {
  font-family: 'PasswordAsterisk';
  src: url('password-asterisk.woff2') format('woff2'),
       url('password-asterisk.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

input[type="password"] {
  font-family: 'PasswordAsterisk', sans-serif;
  /* 确保字体大小合适，星号显示正常 */
  font-size: 16px;
}

这样默认的密码圆点就会被星号替代，完全基于CSS，兼容性也不错。

方法2：JavaScript模拟密码输入（兼容性最广） #

如果不想折腾字体，我们可以用一个文本输入框来显示星号，同时用隐藏的输入框保存真实密码：

HTML结构： #

<input type="text" id="fakePassword" placeholder="请输入密码" />
<input type="password" id="realPassword" style="display: none;" />

JavaScript逻辑： #

const fakeInput = document.getElementById('fakePassword');
const realInput = document.getElementById('realPassword');

fakeInput.addEventListener('input', function(e) {
  // 记录真实输入的字符
  const inputValue = e.target.value;
  // 把显示的内容替换成对应长度的星号
  realInput.value = inputValue;
  fakeInput.value = '*'.repeat(inputValue.length);
});

// 处理回退删除
fakeInput.addEventListener('keydown', function(e) {
  if (e.key === 'Backspace' && fakeInput.value.length > 0) {
    // 同步删除真实密码的最后一个字符
    realInput.value = realInput.value.slice(0, -1);
  }
});

提交表单的时候，只需要获取realPassword的值即可，这个方法兼容所有浏览器，包括旧版本。

方法3：使用CSS背景模拟（简单但有局限性） #

这种方法适合不需要复制功能的场景，用背景重复的星号来模拟：

input[type="password"] {
  color: transparent;
  background-image: repeating-linear-gradient(to right, '*' 0, '*' 1ch, transparent 1ch, transparent 1.5ch);
  /* 调整背景位置和大小，匹配输入框高度 */
  background-size: 100% 80%;
  background-position: center left;
  background-repeat: repeat-x;
}

注意：这个方法的局限性是星号的间距和输入框字体大小强相关，而且无法正确处理不同长度的字符，仅适合简单场景。

内容的提问来源于stack exchange，提问作者Asmita Nikhare