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

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

Answer 2

截图：

html

<div class="con">
        <div class="input-con"><input type="text" value="text example" /></div>
        <div class="strip top-bottom"></div>
        <div class="strip bottom-top"></div>
     </div>

css

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

Answer 3

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

http://jsfiddle.net/rmqJf/

自从我开始研究它之后，出现了很多其他答案，其中一些非常相似。有很多选择！

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

不过，纵观这些，我倾向于觉得@Ragnarokkr 建议并由@kalpesh patel 提出的背景图像解决方案可能是最简单的解决方案，如果执行得当的话。

我的代码：

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

Answer 4

将此添加为新答案，因为我认为它比我最初的回复效果更好：

http://jsfiddle.net/QrLLA/

这次只有几行代码。的HTML：

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

CSS：

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

只需使用我在 MS Paint 中制作的“x”图像作为文本区域的背景图像；该background-size: 100% 100%;属性允许重新调整大小。

截屏：

这仍然可以写入文本区域；我不确定在您的情况下这是否是理想的行为。

Answer 5

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

Answer 6

你可以试试这个：

标记：

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

CSS：

div.canceled_input_container {
   position:relative;
   height:30px;
}

div.canceled_input_container span{
   position:absolute;
   background-image: url("/path/to/image");
   background-repeat: no-repeat;
   height:/*background image height*/
   width:/*background image width*/
   top:-15px;
   z-index:1;
}

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

Answer 7

好吧，这适用于大多数浏览器：

空：☐ &#9744 ;

勾选：☑ &#9745 ;

残疾人：☒ &#9746 ;

添加颜色以使其看起来更加禁用。

Answer 8

http://jsfiddle.net/tylerbrownhenry/NRHY5/

干得好。对于标记...

<input type='text'/>

然后使用 jquery，您可以将其设为函数或回调，但这是您应该运行以将“X”添加到输入字段。我只是使用“输入”作为选择器，但您可以更改它以满足您的需要。

我只是用一个 div 包装了输入，然后在那个 div 里面放了另一个 div。子 div 的 z-index 应该高于输入字段，以便它位于顶部。

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

然后我不想发布 jsFiddle 中的整个 CSS。因为我使用了 dataUri，所以我不必上传图像，但您可以将背景图像制作为您想要的任何“X”图像。

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

希望有帮助！

Answer 9

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