现代浏览器仅用CSS能否修改input输入框的placeholder占位符文本？

仅使用CSS可以实现修改input占位符文本的需求，你之前的写法不生效有两个核心原因：

1. 原生<input>属于替换元素，本身不支持::before/::after伪元素
2. ::placeholder是浏览器定义的特殊伪元素，规范明确禁止嵌套其他伪元素，所以给它加::before的写法完全无效

以下是两种可行的实现方案：

方案1：兼容性较好，无需修改HTML #

要求浏览器支持:has()选择器（Chrome 105+、Firefox 121+、Safari 15.4+均已支持，覆盖90%以上的全球用户）

/* 隐藏原有placeholder文字 */
input#email::placeholder {
  color: transparent !important;
}
/* 给input开启定位上下文 */
:root:has(#email:placeholder-shown) #email {
  position: relative;
}
/* 插入自定义占位符内容 */
:root:has(#email:placeholder-shown) #email::after {
  content: "(Optional) Email*";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  font-size: inherit;
}

方案2：全版本浏览器兼容，无需修改HTML #

通过内联SVG背景实现，兼容所有支持CSS3的浏览器

/* 无输入时隐藏原有内容和占位符 */
input#email:placeholder-shown {
  text-indent: -9999px;
}
input#email::placeholder {
  color: transparent;
}
/* 插入自定义占位符背景 */
input#email:placeholder-shown {
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><text x="8" y="15" fill="%23999" font-size="14">(Optional) Email*</text></svg>') no-repeat left center;
}
/* 聚焦或有输入时恢复正常样式 */
input#email:focus,
input#email:not(:placeholder-shown) {
  text-indent: 0;
  background: #fff;
}

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