如何通过CSS修改输入框的placeholder文本

直接通过::placeholder伪元素的content属性修改placeholder内容是行不通的——浏览器规范里，这个伪元素只能用来样式化HTML原生placeholder属性的已有文本，没法凭空生成新内容。结合你不能改HTML、不能用JS的限制，可以借助父元素的伪元素来模拟placeholder效果：

具体实现代码 #

/* 给父容器设置相对定位，作为伪元素的定位基准 */
.col {
  position: relative;
}

/* 用父容器的:before伪元素模拟placeholder文本 */
.col:before {
  content: "Type something";
  /* 样式匹配原生placeholder的视觉效果 */
  color: #999;
  font-size: 1rem;
  position: absolute;
  left: 15px; /* 对应input的padding-left值，保证位置对齐 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 避免伪元素挡住input的点击和输入 */
}

/* 当input获得焦点或已有内容时，隐藏模拟的placeholder */
.col:has(#myID:focus):before,
.col:has(#myID:not(:placeholder-shown)):before {
  display: none;
}

注意事项 #

• :has()选择器需要现代浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），旧版浏览器无法兼容。
• 要根据你实际使用的input内边距（padding）调整伪元素的left值，确保文本位置和原生placeholder完全对齐。
• 必须设置pointer-events: none，否则伪元素会覆盖在input上方，导致无法正常输入。

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