How to put a diagonal line over a textbox in CSS?

Question

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.

Anyone got any ideas?

Answer 1

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!

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.

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.

The code for mine:

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 2

Alternatively, here is a pretty solution using SVG lines (no JS), which automatically scales to the dimensions of your text-area. It can also be applied over img elements for example.

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 3

Adding this one as a new answer because I think it works better than my initial response:

http://jsfiddle.net/QrLLA/

only a few lines of code this time. The HTML:

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

The CSS:

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

Just uses a image of an 'x' that I made in MS Paint as the background image for the textarea; the background-size: 100% 100%; property allows for re-sizing.

Screenshot:

This still enables the textarea to be written in; I'm not sure if that would be desired behavior in your case or not.

Answer 4

the screenshot:

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 5

You could create an image (one diagonal line) and set the textbox's background with that image (horizontally repeating if you want):

Answer 6

You can try out this:

Markup:

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

This is just to guide you and does not contain final solution, you have to set position and other properties as per your requirement.

Answer 7

Well, this is will work in most browsers:

Empty: ☐ &#9744 ;

Checked: ☑ &#9745 ;

Disabled: ☒ &#9746 ;

Add colors to make it looks even more disabled.

Answer 8

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

Here you go. For the markup...

<input type='text'/>

Then using jquery, you can either make this a function or a callback, but this is what you should run to add the 'X' to the input field. I'm just using 'input' as the selector but you can change it to fit your need.

I just wrapped the input with a div, and then put another div inside that div. The z-index of the child div should be higher than the input field, so that it will lay on top.

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

Then I don't want to post the entire css that was in the jsFiddle. Because I used a dataUri so I didn't have to upload an an image, but you can just make the background-image whatever 'X' image you want.

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

Hope that helps!

Answer 9

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