Javascript 在CSS中如何在文本框上放置对角线？

很抱歉没有一个例子，但基本上我想给一个文本框划掉的效果，如被取消，等等

有人有什么想法吗？

<hr id="linethru" width="100%" color="black" >

您可以创建一个图像（一条对角线）并用该图像设置文本框的背景（如果需要，可以水平重复）：

您可以尝试以下方法：

标记：

<div class='canceled_input_container'>
  <input type='text'/>
  <span></span> 
</div>

这只是为了指导您，不包含最终解决方案，您必须根据需要设置位置和其他属性。

屏幕截图：

html

---

这在大多数浏览器中都适用：

空的：☐ <代码>☐

检查：☑ <代码>☑

残疾人士：☒ <代码>☒

给你。对于标记

<input type='text'/>

---

希望有帮助

这里有另一种可能的方法，这个方法使用HTML5画布元素在文本区域上绘制一个“x”

自从我开始研究这个问题以来，出现了很多其他的答案，其中一些非常相似。有很多选择

我将textarea直接放在画布的顶部（大小相同），然后在textarea的背景上使用带有alpha 0的rgba（）使背景透明，以便可以看到下面的画布

尽管如此，我还是倾向于认为@Ragnarokkr建议的、由@kalpesh patel使用的背景图像解决方案可能是最简单的解决方案，如果执行正确的话

矿山代码：

HTML:

CSS:

---

添加此选项作为新答案，因为我认为它比我最初的回答更有效：

这次只有几行代码。 HTML：

    <textarea id="myTextArea"></textarea>

只需使用我在MS Paint中制作的“x”图像作为文本区域的背景图像；

背景大小：100%100%属性允许重新调整大小

截图：


这仍然允许写入文本区域；我不确定在你的情况下这是否是你想要的行为
 或者，这里有一个使用SVG行（无JS）的漂亮解决方案，它可以自动缩放到文本区域的尺寸。例如，它也可以应用于img元素

JSFiddle：

HTML:

无法应用于文本字段的。另外，
元素不支持
颜色
或
宽度
属性。同样，这不能应用于文本字段。它只创建一个“独立的”水平分隔符。这并不能回答问题。@Dashwuff:，尽管如此。重复该图像最终会使其看起来像是斜线（
//
），但不是一行。是的，这只是一个想法（如我所说，如果你愿意的话）。我想这是最简单的方法。其他方法可以通过重叠的
完成，使用
:before
或
:before
但我从来没有尝试过，所以这只是我的假设。如果你能提供一个JSFIDLE，那将非常棒。是的，慢慢来。我不急。你能提供一个关于JSFIDLE的例子吗；我使用CSS3变换属性来绘制对角线；这应该适用于IE9+/fixfox/chrome。您也可以将其编写为jquery插件，根据textbox的宽度和线条高度动态确定对角线的宽度和角度。我非常喜欢它，但如果您可以调整textarea的大小，那将是非常棒的。好吧，在思考了一点之后，我想出了一个更简单的方法，也可以重新调整文本区域的大小：。它在文本区域中使用背景图像和CSS3属性
背景大小：100%100%
在文本区域更改时保持图像的正确大小和形状。理论上，每次用户更改文本区域大小时，我都可以编写脚本在初始解决方案中重新绘制画布元素，但这太疯狂了。这种方式的代码更少，并且可能更广泛地受到浏览器的支持（尽管它仍然是CSS3解决方案，所以在较旧的浏览器上不起作用）。
.con {
         position: relative;
      }
      .strip {
        margin-left:2px;
         position: absolute;
         left: 0px;
         top: 0px;
         z-index: 10;
         border-width: 0 0 1px 0;
         border-color: red;
         border-style: solid;
         width: 145px;
         transform-origin:top left;
         -ms-transform-origin:top left;
         -moz-transform-origin:top left;
         -webkit-transform-origin:top left;
      }
      .top-bottom {
         margin-top: 2px;
         transform:rotate(8deg);
         -ms-transform:rotate(8deg);
         -moz-transform:rotate(8deg);
         -webkit-transform:rotate(8deg);
      }
      .bottom-top {
         margin-top: 1.2em;
         transform:rotate(-8deg);
         -ms-transform:rotate(-8deg);
         -moz-transform:rotate(-8deg);
         -webkit-transform:rotate(-8deg);
      }
      .input-con > input {
          line-height:1.2em;
          width:146px;
      }

<input type='text'/>

var input = $('input'),
divWidth = input.width();
  input.wrap('<div class="ex" style="width:'+divWidth+';"></div>').before('<div class="exMark exImage"></div>');

.ex{
  z-index:10000;
width:0px; /* This will get overwritten by the javascript */
}

.exMark{
 width:150px; 
  z-index:1000;
  height:2px;
  position:absolute;
}

.exImage{
  position:absolute;
  width:150px;
  height:50px;
  background-repeat:no-repeat;
  background-image:url('x.jpg');  
}

    <canvas id="myCanvas" width="200" height="100"></canvas>
    <textarea id="myTextArea"></textarea>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.strokeStyle="red";
    ctx.moveTo(0,100);
    ctx.lineTo(200,0);
    ctx.stroke();
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

    html, body { 
      margin: 0;
      padding: 0;
    }

    #myCanvas {
      padding: 0;
      margin: 0;
      width: 200px;
      height: 100px;
    }

    #myTextArea {
      position: absolute;
      left: 0px;
      right: 0;
      height: 102px;
      width: 202px;
      background: rgba(255,255,255,0);
      padding: 0;
      margin: 0;
    }

    <textarea id="myTextArea"></textarea>

    #myTextArea {
      display: block;
      background-image: url('http://i.imgur.com/4zKm6.png');
      background-size: 100% 100%;
      width: 200px;
      height: 100px;
    }

<div class="crossed">
    <textarea>This is a test</textarea>
    <svg>
        <line x1="0" y1="100%" x2="100%" y2="0" />
        <line x1="0" y1="0" x2="100%" y2="100%" />
    </svg>
</div>

.crossed {
    position: relative;
    width: 200px;
    height: 80px;
}
.crossed svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.crossed svg line {
    stroke: rgb(255, 0, 0);
    stroke-width: 2;
}
.crossed textarea {
    width: 100%;
    height: 100%;
    box-sizing:border-box;
}