divのようにサイズ変更可能テキストエリア

Question

ブラウザでは、デフォルトでコーナーをドラッグしてテキスト領域のサイズを変更できます。このルールを他の要素（divなど）に適用できるかどうか疑問に思っていました。私はこの効果がjQuery draggableまたはjQuery-ui resizable関数を使用して達成できることを知っていますが、そのライブラリに頼るのを避けることができるなら、プレーンhtml/cssでやりたいと思います。このように動作させるためにdivに適用できるCSSルールはありますか？

その他の解決策がありましたら、聞いてください。

Answer 1

css3 resizeプロパティを使用します。

div { 
    resize: both; 
} 

resize: horizontalとresize: verticalもあります。

---

ない現在のクロスブラウザはhttp://caniuse.com/#feat=css-resize

Answer 2

あなたはCSS3を使ってこれを行うことができます。サイズ変更可能なオーバーフロースタイルを設定することにより、ユーザーがサイズ変更可能なdivタグを作成できます。 私はここで水平方向と垂直方向の両方にサイズを変更設定している：これは素晴らしいです

.isResizable { 
 
    background: rgba(255, 0, 0, 0.2); 
 
    font-size: 2em; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    resize: both; 
 
    width: 160px; 
 
    height: 120px; 
 
    min-width: 120px; 
 
    min-height: 90px; 
 
    max-width: 400px; 
 
    max-height: 300px; 
 
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>