如何将input输入框内文本设置为删除线样式？

要让<input type="text">里的文本显示成删除线效果，直接用CSS的text-decoration: line-through属性就能实现，下面是几种常用方法：

方法1：内联样式直接设置 #

直接在input标签里加style属性，快速生效：

<input type="text" value="Hello World!" style="text-decoration: line-through;" />

方法2：通过CSS类统一控制 #

如果多个输入框需要相同样式，定义CSS类更便于维护：

<style>
  .strike-input {
    text-decoration: line-through;
  }
</style>
<input type="text" value="Hello World!" class="strike-input" />

方法3：JavaScript动态控制 #

如果需要根据交互（比如点击按钮）动态添加/移除删除线，可以用JS操作：

// 获取目标输入框
const targetInput = document.querySelector('input[type="text"]');

// 添加删除线
targetInput.style.textDecoration = 'line-through';
// 或者通过添加类名的方式
// targetInput.classList.add('strike-input');

// 移除删除线的话可以用：
// targetInput.style.textDecoration = 'none';
// targetInput.classList.remove('strike-input');

注意事项 #

主流浏览器（Chrome、Firefox、Edge等）都完美支持text-decoration在input元素上的应用，无需额外兼容处理。如果遇到极个别老旧浏览器渲染异常，可以尝试用伪元素模拟，但这种场景非常少见。

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