如何使用HTML和CSS仅隐藏输入表单内的输入文本

方案1：使用原生密码输入属性 #

直接为input标签添加type="password"，浏览器会默认将输入内容替换为圆点/星号实现隐藏，修改后代码如下：

<input class="a" type="password">
<style>
.a{ 
  border: none; 
}
.a:focus{ 
  border: none; 
  outline: none;
}
</style>

方案2：完全隐藏所有输入视觉痕迹 #

如果连密码输入默认的圆点/星号也不想显示，可通过CSS属性实现全隐藏效果：

<input class="a">
<style>
.a{ 
  border: none;
  /* 文字颜色设为完全透明 */
  color: transparent;
  /* 禁用文字选中效果，避免选中后露出内容 */
  user-select: none;
}
.a:focus{ 
  border: none; 
  outline: none;
}
</style>

可选自定义配置 #

如果想要自定义输入内容的隐藏样式，可以使用-webkit-text-security属性调整：

• -webkit-text-security: disc：默认圆点样式
• -webkit-text-security: circle：空心圆样式
• -webkit-text-security: square：方块样式
• -webkit-text-security: none：完全隐藏无占位符号
  该属性兼容绝大多数主流webkit内核浏览器，可根据需求选择使用。

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