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

HTML5 の canvas 要素を使用して、テキストエリアに「x」を描画する別の方法を次に示します。

http://jsfiddle.net/rmqJf/

私がそれに取り組み始めたので、他の多くの答えが現れました。それらのいくつかはかなり似ていました。一緒に行くオプションがたくさん！

テキストエリアを (同じサイズの) キャンバスの上に直接配置し、テキストエリアの背景にアルファ 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ペイントで作成した「x」の画像をテキストエリアの背景画像として使用するだけです。このbackground-size: 100% 100%;プロパティはサイズ変更を可能にします。

スクリーンショット:

これにより、テキストエリアに書き込むことができます。それがあなたの場合に望ましい動作であるかどうかはわかりません。

Answer 4

スクリーンショット:

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

まあ、これはほとんどのブラウザで動作します：

空: ☐ &#9744 ;

チェックあり：☑ &#9745 ;

無効: ☒ &#9746 ;

色を追加して、さらに無効に見えるようにします。

Answer 6

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 7

画像 (1 つの対角線) を作成し、その画像でテキスト ボックスの背景を設定できます (必要に応じて水平方向に繰り返します)。

Answer 8

これを試すことができます：

マークアップ:

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

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