javascript - 如何在 CSS 中的文本框上放置对 Angular 线？

Question

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

有人有什么想法吗？

Answer 1

或者，这是一个使用 SVG 线条(无 JS)的漂亮解决方案，它会自动缩放到文本区域的尺寸。例如，它也可以应用于 img 元素。

JSFiddle:http://jsfiddle.net/xbbzcsrk/

HTML:

<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>

CSS:

.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;
}