如何在CSS中的文本框上放置对角线? [英] How to put a diagonal line over a textbox in CSS?

问题描述

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

Sorry about not having an example, but basically I want to give an effect of having a text box crossed out, like being cancelled, etc.

有人有什么主意吗?

推荐答案

这是另一种可能的方法，该方法使用HTML5 canvas元素在文本区域上绘制"x".

Here's another possible method, this one using the HTML5 canvas element to draw an 'x' over the textarea.

http://jsfiddle.net/rmqJf/

自从我开始处理其他问题以来，突然出现了一些答案，其中有些非常相似.有很多选择！

Since I started working on it a bunch of other, answers popped up, some of them pretty similar. Lots of options to go with!

我将文本区域直接放在画布(相同大小)的顶部，然后在文本区域的背景上使用带alpha 0的rgba()使背景透明，以便您可以看到下面的画布.

I place the textarea directly on top of the canvas (of the same size), then use rgba() with alpha 0 on the background of the textarea to make the background transparent so you can see the canvas underneath.

不过，仔细看这些内容，我倾向于认为@Ragnarokkr建议的背景图像解决方案以及@kalpesh patel提出的背景图像解决方案可能是最简单的解决方案，如果执行得当的话.

Looking through these though, I'm inclined to feel like the background image solution suggested by @Ragnarokkr and sussed out by @kalpesh patel may be the simplest solution, if executed right.

我的代码:

HTML:

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

JS:

    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();

CSS:

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

这篇关于如何在CSS中的文本框上放置对角线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！