如何为验证失败的input值添加删除线且不影响placeholder？

直接给input加text-decoration: line-through再试图用::placeholder { text-decoration: none }覆盖的方法之所以无效，是因为多数浏览器会强制让placeholder继承输入框的text-decoration样式，伪元素的设置优先级不够。

这里提供两种可行的实现方案：

方案一：用容器伪元素模拟删除线（仅适用于单行输入） #

纯CSS实现，适合单行输入场景：

<div class="input-wrap">
  <input type="text" placeholder="请输入内容">
</div>

.input-wrap {
  position: relative;
  display: inline-block;
}

/* 验证失败时显示删除线 */
.input-wrap.error::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8px; /* 和input的padding-left保持一致 */
  right: 8px; /* 和input的padding-right保持一致 */
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  pointer-events: none; /* 不干扰输入交互 */
}

input {
  padding: 6px 8px;
  border: 1px solid #ddd;
  background: #fff;
}

input::placeholder {
  color: #999;
  background: #fff; /* 用背景色覆盖横线，避免placeholder被穿过 */
}

方案二：用同步span模拟输入内容（支持所有场景） #

需要少量JS同步输入值，能完美区分输入内容和placeholder：

<div class="input-container">
  <span class="content-mirror"></span>
  <input type="text" placeholder="请输入内容" oninput="this.previousElementSibling.textContent = this.value">
</div>

.input-container {
  position: relative;
  display: inline-block;
}

.content-mirror {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  pointer-events: none;
  color: #333;
}

input {
  position: relative;
  z-index: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  background: transparent;
  color: transparent; /* 隐藏输入框自身的文字 */
}

input::placeholder {
  color: #999; /* placeholder正常显示 */
}

/* 验证失败时给模拟内容加删除线 */
.input-container.error .content-mirror {
  text-decoration: line-through;
}

原理是让输入框自身文字透明，用下方的span同步显示输入内容，验证失败时仅给span加删除线，placeholder属于输入框本身，不受任何影响。

内容的提问来源于stack exchange，提问作者Jonas S.