如何让password类型输入框无论输入多少字符都仅显示1个圆点？

纯CSS方案 #

实现逻辑简单，无需JS，通过让所有密码圆点重叠实现单圆点效果，适合浏览器环境可控的场景使用。

<input type="password" class="single-dot-password">

.single-dot-password {
  /* 核心配置：极大负字符间距让所有圆点重叠 */
  letter-spacing: -10em;
  /* 调整内边距让圆点位于输入框正常起始位置 */
  padding-left: 8px;
  /* 可选：隐藏光标避免视觉异常，需要保留光标可删除该行 */
  caret-color: transparent;
}

注意：该方案存在一定浏览器兼容性差异，部分非webkit内核浏览器可能出现圆点偏移、重叠失效的问题。

JS+CSS方案（更推荐） #

通过视觉层和数据层分离实现，兼容性拉满，无适配问题，可自定义程度更高。

<div class="password-input-wrapper">
  <!-- 视觉层固定圆点 -->
  <span class="dot">*</span>
  <!-- 真实输入层，透明覆盖接收用户输入 -->
  <input type="password" class="real-input" placeholder="请输入密码">
</div>

.password-input-wrapper {
  position: relative;
  width: 200px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0 8px;
  display: flex;
  align-items: center;
}
.real-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  border: none;
  background: transparent;
}
/* 无输入时隐藏圆点，有输入时显示 */
.dot {
  display: none;
  font-size: 16px;
}
.password-input-wrapper.has-value .dot {
  display: block;
}

const realInput = document.querySelector('.real-input');
const wrapper = document.querySelector('.password-input-wrapper');

// 监听输入控制圆点显示
realInput.addEventListener('input', () => {
  wrapper.classList.toggle('has-value', realInput.value.length > 0);
});

// 取值直接取realInput.value即可

这个方案中，用户的输入全部由真实的密码输入框接收，表单提交、取值逻辑和原生输入框完全一致，没有额外改造成本。

内容的提问来源于stack exchange，提问作者Jasper Scritt