如何使readonly输入框保留值但仅显示占位符，且不使用透明色？

嘿，这个问题我之前也碰到过，color: transparent确实在不少场景下没法满足需求——比如用户选中复制时仍能获取到value值，或者部分浏览器里placeholder会跟着变透明。给你几个靠谱的方案，都能实现「保留输入框value值，仅显示placeholder」的效果：

方案1：文本缩进+placeholder样式重置 #

这个方案是把value文本移出输入框可视区域，同时让placeholder回到正常位置，兼容性很好：

/* 针对目标输入框 */
#param-USERNAME {
  text-indent: -9999px; /* 把value文本往左移出可视范围 */
  overflow: hidden; /* 隐藏超出输入框的内容 */
  padding-left: 12px; /* 保持和原输入框一致的左侧内边距，确保placeholder位置正确 */
}

/* 重置placeholder的文本缩进，让它正常显示 */
#param-USERNAME::-webkit-input-placeholder {
  text-indent: 0;
  color: #999; /* 设置你想要的placeholder颜色 */
}

#param-USERNAME::-moz-placeholder {
  text-indent: 0;
  color: #999;
}

#param-USERNAME:-ms-input-placeholder {
  text-indent: 0;
  color: #999;
}

优点：完全不影响输入框的value值提交，placeholder显示正常，几乎所有浏览器都支持。

方案2：字体大小控制 #

通过把输入框的字体设为0，让value文本消失，再单独给placeholder设置正常字体大小：

#param-USERNAME {
  font-size: 0; /* 让value文本因字体大小为0而不可见 */
}

/* 给placeholder恢复正常字体大小 */
#param-USERNAME::-webkit-input-placeholder {
  font-size: 14px; /* 替换成你输入框原本的字体大小 */
  color: #999;
}

#param-USERNAME::-moz-placeholder {
  font-size: 14px;
  color: #999;
}

#param-USERNAME:-ms-input-placeholder {
  font-size: 14px;
  color: #999;
}

优点：代码更简洁，同样不影响value值的提交，适合样式简单的输入框。

方案3：容器裁剪（进阶） #

如果上面的方案都不满足你的需求，还可以用clip-path裁剪输入框的文本显示区域，只保留placeholder的空间：

#param-USERNAME {
  /* 裁剪掉输入框的文本区域，只留顶部的placeholder显示空间 */
  clip-path: inset(0 0 calc(100% - 20px) 0);
  /* 根据你的输入框高度调整calc里的数值，确保placeholder能显示 */
}

注意：这个方案需要根据输入框的实际高度调整裁剪参数，兼容性稍差（IE不支持），适合现代浏览器环境。

这几个方案都能保证输入框的value值在表单提交时正常传递，同时用户只能看到placeholder内容，你可以根据自己的项目环境选择最合适的~

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