Question

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

有人有任何想法吗？

Answer 1

屏幕截图： enter image description here

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 2

这是另一种可能的方法，这个方法使用HTML5 canvas元素在textarea上绘制'x'。

http://jsfiddle.net/rmqJf/

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

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

通过这些看，我倾向于感觉@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 3

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

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'图像作为textarea的背景图像; background-size: 100% 100%;属性允许重新调整大小。

截图：

screenshot:

这仍然可以写入textarea;我不确定这是不是你想要的行为。

Answer 4

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

Answer 5

你可以试试这个：

标记：

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

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

空：☐&#9744 ;

已选中：☑&#9745 ;

已停用：☒&#9746 ;

Add colors to make it looks even more disabled.

Answer 7

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

你走了。对于标记...

<input type='text'/>

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

我只是用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 8

或者，这是一个使用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 9

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

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

9 个答案: